前言
在使用uView開發專案中，遇到了一個業務場景： 點擊輸入框彈出底部視窗，內置電話號碼區號索引串列，點擊切換區號 :
當我根據邏輯以為在 u-popup 里加入 u-index-list 就行了，結果遇到問題了：
- 索引串列滾動不了；
- 選擇索引字符，串列吸頂不了；
- 瞄點與頂部距離有偏差，
所以作者開始排查，但api檔案沒寫相關用法，于是開始百度，但發現大家都在詢問…（可能大家也百度過這類文章：https://ask.dcloud.net.cn/question/103729）
官網也沒有合適滿意的解決方案，于是作者只能去修改原始碼了…
1. 滾動不了
一開始很奇怪，看人家實體是可以滾動，但在u-popup不行，原來檔案寫了onPageScroll這個方法的，是針對整個頁面去滾動的：
所以針對業務場景，這個方法就不適用了，首先是想到在u-popup里面加入一層scroll-view，但沒用… 看檔案得知原來組件里已內置了（還是要好好看檔案呀~），所以這個也是無效的，
解決方法：監聽彈出層的滾動，利用子組件把彈出層的scrollTop傳給父組件里的u-index-list
- 在u-popup組件里找到這段代碼，添加事件scroll：
- 在方法里獲取
u-popup的scrollTop：
- 父組件再賦值：
2. 吸頂不了
首先找出目標代碼，在u-index-list里：
這里是針對整個頁面去滾動吸頂的，所以同理把這段代碼去掉，把容器距離頂部的高度傳給父組件：
把u-popup滾動高與容器的高度添加：
3. 高度偏差：
定位到目標代碼：
備注： 修改原始碼前要先理解原始碼的邏輯噢~
然后根據你彈出層的高度進行增減就行啦，
下面是完整代碼：
<u-popup :scrollTopBox="scrollTopBox" v-model="show" mode="bottom" height="1028rpx" @scroll="scroll">
<!-- tab -->
<view class="tabs">
<view class="tabs_wrapper">
<view class="tabs_wrapper_nav">
<view class="tabs"><text>國字區號</text></view>
<view class="tabs__line"></view>
</view>
<view class="cancel_button"><text @click="show = false">取消</text></view>
</view>
</view>
<u-index-list :scrollTop="scrollTop" @select="select" :index-list="indexList" activeColor="#e00202">
<view v-for="(item, index) in cityArr" :key="index">
<u-index-anchor :index="item.letter" />
<view class="list-cell" v-for="(item1, index) in item.data" :key="index" @click="selected(item1.code)">
<text>{{ item1.en }}</text>
<text>{{ item1.code }}</text>
</view>
</view>
</u-index-list>
</u-popup>
data() {
return {
show: false,
scrollTop: 0,
scrollTopBox: 0,
indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'Y', 'Z'],
},
methods:{
scroll(val) {
// console.log(val)
this.scrollTop = val;
},
select(index) {
this.scrollTopBox = index + this.scrollTop;
},
}
u-popup 組件：
<template>
<view v-if="visibleSync" :style="[customStyle, {
zIndex: uZindex - 1
}]" class="u-drawer" hover-stop-propagation>
<u-mask :duration="duration" :custom-style="maskCustomStyle" :maskClickAble="maskCloseAble" :z-index="uZindex - 2" :show="showDrawer && mask" @click="maskClick"></u-mask>
<view
class="u-drawer-content"
@tap="modeCenterClose(mode)"
:class="[
safeAreaInsetBottom ? 'safe-area-inset-bottom' : '',
'u-drawer-' + mode,
showDrawer ? 'u-drawer-content-visible' : '',
zoom && mode == 'center' ? 'u-animation-zoom' : ''
]"
@touchmove.stop.prevent
@tap.stop.prevent
:style="[style]"
>
<view class="u-mode-center-box" @tap.stop.prevent @touchmove.stop.prevent v-if="mode == 'center'" :style="[centerStyle]">
<u-icon
@click="close"
v-if="closeable"
class="u-close"
:class="['u-close--' + closeIconPos]"
:name="closeIcon"
:color="closeIconColor"
:size="closeIconSize"
></u-icon>
<scroll-view class="u-drawer__scroll-view" scroll-y="true">
<slot />
</scroll-view>
</view>
<scroll-view class="u-drawer__scroll-view" scroll-y="true" :scroll-top="scrollTopBox" v-else @scroll="scroll">
<slot />
</scroll-view>
<view @tap="close" class="u-close" :class="['u-close--' + closeIconPos]">
<u-icon
v-if="mode != 'center' && closeable"
:name="closeIcon"
:color="closeIconColor"
:size="closeIconSize"
></u-icon>
</view>
</view>
</view>
</template>
<script>
import uMask from "../u-mask/u-mask.vue";
import zIndex from '../libs/config/zIndex.js';
/**
* popup 彈窗
* @description 彈出層容器，用于展示彈窗、資訊提示等內容，支持上、下、左、右和中部彈出，組件只提供容器，內部內容由用戶自定義
* @tutorial https://www.uviewui.com/components/popup.html
* @property {String} mode 彈出方向（默認left）
* @property {Boolean} mask 是否顯示遮罩（默認true）
* @property {Stringr | Number} length mode=left | 見官網說明（默認auto）
* @property {Boolean} zoom 是否開啟縮放影片，只在mode為center時有效（默認true）
* @property {Boolean} safe-area-inset-bottom 是否開啟底部安全區適配（默認false）
* @property {Boolean} mask-close-able 點擊遮罩是否可以關閉彈出層（默認true）
* @property {Object} custom-style 用戶自定義樣式
* @property {Stringr | Number} negative-top 中部彈出時，往上偏移的值
* @property {Numberr | String} border-radius 彈窗圓角值（默認0）
* @property {Numberr | String} z-index 彈出內容的z-index值（默認1075）
* @property {Boolean} closeable 是否顯示關閉圖示（默認false）
* @property {String} close-icon 關閉圖示的名稱，只能uView的內置圖示
* @property {String} close-icon-pos 自定義關閉圖示位置（默認top-right）
* @property {String} close-icon-color 關閉圖示的顏色（默認#909399）
* @property {Number | String} close-icon-size 關閉圖示的大小，單位rpx（默認30）
* @event {Function} open 彈出層打開
* @event {Function} close 彈出層收起
* @example <u-popup v-model="show"><view>出淤泥而不染，濯清漣而不妖</view></u-popup>
*/
export default {
components:{
uMask
},
name: 'u-popup',
props: {
// 滾動
scrollTopBox:{
type: Number,
default: 0
},
/**
* 顯示狀態
*/
show: {
type: Boolean,
default: false
},
/**
* 彈出方向，left|right|top|bottom|center
*/
mode: {
type: String,
default: 'left'
},
/**
* 是否顯示遮罩
*/
mask: {
type: Boolean,
default: true
},
// 抽屜的寬度(mode=left|right)，或者高度(mode=top|bottom)，單位rpx，或者"auto"
// 或者百分比"50%"，表示由內容撐開高度或者寬度
length: {
type: [Number, String],
default: 'auto'
},
// 是否開啟縮放影片，只在mode=center時有效
zoom: {
type: Boolean,
default: true
},
// 是否開啟底部安全區適配，開啟的話，會在iPhoneX機型底部添加一定的內邊距
safeAreaInsetBottom: {
type: Boolean,
default: false
},
// 是否可以通過點擊遮罩進行關閉
maskCloseAble: {
type: Boolean,
default: true
},
// 用戶自定義樣式
customStyle: {
type: Object,
default() {
return {};
}
},
value: {
type: Boolean,
default: false
},
// 此為內部引數，不在檔案對外使用，為了解決Picker和keyboard等融合了彈窗的組件
// 對v-model雙向系結多層呼叫造成報錯不能修改props值的問題
popup: {
type: Boolean,
default: true
},
// 顯示顯示彈窗的圓角，單位rpx
borderRadius: {
type: [Number, String],
default: 0
},
zIndex: {
type: [Number, String],
default: ''
},
// 是否顯示關閉圖示
closeable: {
type: Boolean,
default: false
},
// 關閉圖示的名稱，只能uView的內置圖示
closeIcon: {
type: String,
default: 'close'
},
// 自定義關閉圖示位置，top-left為左上角，top-right為右上角，bottom-left為左下角，bottom-right為右下角
closeIconPos: {
type: String,
default: 'top-right'
},
// 關閉圖示的顏色
closeIconColor: {
type: String,
default: '#909399'
},
// 關閉圖示的大小，單位rpx
closeIconSize: {
type: [String, Number],
default: '30'
},
// 寬度，只對左，右，中部彈出時起作用，單位rpx，或者"auto"
// 或者百分比"50%"，表示由內容撐開高度或者寬度，優先級高于length引數
width: {
type: String,
default: ''
},
// 高度，只對上，下，中部彈出時起作用，單位rpx，或者"auto"
// 或者百分比"50%"，表示由內容撐開高度或者寬度，優先級高于length引數
height: {
type: String,
default: ''
},
// 給一個負的margin-top，往上偏移，避免和鍵盤重合的情況，僅在mode=center時有效
negativeTop: {
type: [String, Number],
default: 0
},
// 遮罩的樣式，一般用于修改遮罩的透明度
maskCustomStyle: {
type: Object,
default() {
return {}
}
},
// 遮罩打開或收起的影片過渡時間，單位ms
duration: {
type: [String, Number],
default: 250
}
},
data() {
return {
visibleSync: false,
showDrawer: false,
timer: null,
closeFromInner: false, // value的值改變，是發生在內部還是外部
};
},
computed: {
// 根據mode的位置，設定其彈窗的寬度(mode = left|right)，或者高度(mode = top|bottom)
style() {
let style = {};
// 如果是左邊或者上邊彈出時，需要給translate設定為負值，用于隱藏
if (this.mode == 'left' || this.mode == 'right') {
style = {
width: this.width ? this.getUnitValue(this.width) : this.getUnitValue(this.length),
height: '100%',
transform: `translate3D(${this.mode == 'left' ? '-100%' : '100%'},0px,0px)`
};
} else if (this.mode == 'top' || this.mode == 'bottom') {
style = {
width: '100%',
height: this.height ? this.getUnitValue(this.height) : this.getUnitValue(this.length),
transform: `translate3D(0px,${this.mode == 'top' ? '-100%' : '100%'},0px)`
};
}
style.zIndex = this.uZindex;
// 如果用戶設定了borderRadius值，添加彈窗的圓角
if (this.borderRadius) {
switch (this.mode) {
case 'left':
style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0`;
break;
case 'top':
style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx`;
break;
case 'right':
style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx`;
break;
case 'bottom':
style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`;
break;
default:
}
// 不加可能圓角無效
style.overflow = 'hidden';
}
if(this.duration) style.transition = `all ${this.duration / 1000}s linear`;
return style;
},
// 中部彈窗的特有樣式
centerStyle() {
let style = {};
style.width = this.width ? this.getUnitValue(this.width) : this.getUnitValue(this.length);
// 中部彈出的模式，如果沒有設定高度，就用auto值，由內容撐開高度
style.height = this.height ? this.getUnitValue(this.height) : 'auto';
style.zIndex = this.uZindex;
style.marginTop = `-${this.$u.addUnit(this.negativeTop)}`;
if (this.borderRadius) {
style.borderRadius = `${this.borderRadius}rpx`;
// 不加可能圓角無效
style.overflow = 'hidden';
}
return style;
},
// 計算整理后的z-index值
uZindex() {
return this.zIndex ? this.zIndex : zIndex.popup;
}
},
watch: {
value(val) {
if (val) {
this.open();
} else if(!this.closeFromInner) {
this.close();
}
this.closeFromInner = false;
}
},
mounted() {
// 組件渲染完成時，檢查value是否為true，如果是，彈出popup
this.value && this.open();
// console.log(this.scrollTopBox)
},
methods: {
// 判斷傳入的值，是否帶有單位，如果沒有，就默認用rpx單位
getUnitValue(val) {
if(/(%|px|rpx|auto)$/.test(val)) return val;
else return val + 'rpx'
},
scroll(e){
// console.log(e.detail.scrollTop)
this.$emit('scroll', e.detail.scrollTop);
},
// 遮罩被點擊
maskClick() {
this.close();
},
close() {
// 標記關閉是內部發生的，否則修改了value值，導致watch中對value檢測，導致再執行一遍close
// 造成@close事件觸發兩次
this.closeFromInner = true;
this.change('showDrawer', 'visibleSync', false);
},
// 中部彈出時，需要.u-drawer-content將居中內容，此元素會鋪滿螢屏，點擊需要關閉彈窗
// 讓其只在mode=center時起作用
modeCenterClose(mode) {
if (mode != 'center' || !this.maskCloseAble) return;
this.close();
},
open() {
this.change('visibleSync', 'showDrawer', true);
},
// 此處的原理是，關閉時先通過影片隱藏彈窗和遮罩，再移除整個組件
// 打開時，先渲染組件，延時一定時間再讓遮罩和彈窗的影片起作用
change(param1, param2, status) {
// 如果this.popup為false，意味著為picker，actionsheet等組件呼叫了popup組件
if (this.popup == true) {
this.$emit('input', status);
}
this[param1] = status;
if(status) {
// #ifdef H5 || MP
this.timer = setTimeout(() => {
this[param2] = status;
this.$emit(status ? 'open' : 'close');
}, 50);
// #endif
// #ifndef H5 || MP
this.$nextTick(() => {
this[param2] = status;
this.$emit(status ? 'open' : 'close');
})
// #endif
} else {
this.timer = setTimeout(() => {
this[param2] = status;
this.$emit(status ? 'open' : 'close');
}, this.duration);
}
}
}
};
</script>
<style scoped lang="scss">
@import "../libs/css/style.components.scss";
.u-drawer {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.u-drawer-content {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: absolute;
z-index: 1003;
transition: all 0.25s linear;
}
.u-drawer__scroll-view {
width: 100%;
height: 100%;
}
.u-drawer-left {
top: 0;
bottom: 0;
left: 0;
background-color: #ffffff;
}
.u-drawer-right {
right: 0;
top: 0;
bottom: 0;
background-color: #ffffff;
}
.u-drawer-top {
top: 0;
left: 0;
right: 0;
background-color: #ffffff;
}
.u-drawer-bottom {
bottom: 0;
left: 0;
right: 0;
background-color: #ffffff;
}
.u-drawer-center {
@include vue-flex;
flex-direction: column;
bottom: 0;
left: 0;
right: 0;
top: 0;
justify-content: center;
align-items: center;
opacity: 0;
z-index: 99999;
}
.u-mode-center-box {
min-width: 100rpx;
min-height: 100rpx;
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: relative;
background-color: #ffffff;
}
.u-drawer-content-visible.u-drawer-center {
transform: scale(1);
opacity: 1;
}
.u-animation-zoom {
transform: scale(1.15);
}
.u-drawer-content-visible {
transform: translate3D(0px, 0px, 0px) !important;
}
.u-close {
position: absolute;
z-index: 3;
}
.u-close--top-left {
top: 30rpx;
left: 30rpx;
}
.u-close--top-right {
top: 30rpx;
right: 30rpx;
}
.u-close--bottom-left {
bottom: 30rpx;
left: 30rpx;
}
.u-close--bottom-right {
right: 30rpx;
bottom: 30rpx;
}
</style>
u-index-list 組件：
<template>
<!-- 支付寶小程式使用$u.getRect()獲取組件的根元素尺寸，所以在外面套一個"殼" -->
<view>
<view class="u-index-bar">
<slot />
<view v-if="showSidebar" class="u-index-bar__sidebar" @touchstart.stop.prevent="onTouchMove" @touchmove.stop.prevent="onTouchMove"
@touchend.stop.prevent="onTouchStop" @touchcancel.stop.prevent="onTouchStop">
<view v-for="(item, index) in indexList" :key="index" class="u-index-bar__index" :style="{zIndex: zIndex + 1, color: activeAnchorIndex === index ? activeColor : ''}"
:data-index="index">
{{ item }}
</view>
</view>
<view class="u-indexed-list-alert" v-if="touchmove && indexList[touchmoveIndex]" :style="{
zIndex: alertZIndex
}">
<text>{{indexList[touchmoveIndex]}}</text>
</view>
</view>
</view>
</template>
<script>
import zIndex from '../libs/config/zIndex.js';
var indexList = function() {
var indexList = [];
var charCodeOfA = 'A'.charCodeAt(0);
for (var i = 0; i < 26; i++) {
indexList.push(String.fromCharCode(charCodeOfA + i));
}
return indexList;
};
/**
* indexList 索引串列
* @description 通過折疊面板收納內容區域,搭配<u-index-anchor>使用
* @tutorial https://www.uviewui.com/components/indexList.html#indexanchor-props
* @property {Number String} scroll-top 當前滾動高度，自定義組件無法獲得滾動條事件，所以依賴接入方傳入
* @property {Array} index-list 索引字串列，陣列（默認A-Z）
* @property {Number String} z-index 錨點吸頂時的層級（默認965）
* @property {Boolean} sticky 是否開啟錨點自動吸頂（默認true）
* @property {Number String} offset-top 錨點自動吸頂時與頂部的距離（默認0）
* @property {String} highlight-color 錨點和右邊索引字符高亮顏色（默認#2979ff）
* @event {Function} select 選中右邊索引字符時觸發
* @example <u-index-list :scrollTop="scrollTop"></u-index-list>
*/
export default {
name: "u-index-list",
props: {
sticky: {
type: Boolean,
default: true
},
zIndex: {
type: [Number, String],
default: ''
},
scrollTop: {
type: [Number, String],
default: 0,
},
offsetTop: {
type: [Number, String],
default: 0
},
indexList: {
type: Array,
default () {
return indexList()
}
},
activeColor: {
type: String,
default: '#2979ff'
}
},
created() {
// #ifdef H5
this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : 44;
// #endif
// #ifndef H5
this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : 0;
// #endif
// 只能在created生命周期定義children，如果在data定義，會因為回圈參考而報錯
this.children = [];
},
data() {
return {
activeAnchorIndex: 0,
showSidebar: true,
// children: [],
touchmove: false,
touchmoveIndex: 0,
}
},
watch: {
scrollTop() {
this.updateData()
}
},
computed: {
// 彈出toast的z-index值
alertZIndex() {
return zIndex.toast;
}
},
methods: {
updateData() {
this.timer && clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.showSidebar = !!this.children.length;
this.setRect().then(() => {
this.onScroll();
});
}, 0);
},
setRect() {
return Promise.all([
this.setAnchorsRect(),
this.setListRect(),
this.setSiderbarRect()
]);
},
setAnchorsRect() {
return Promise.all(this.children.map((anchor, index) => anchor
.$uGetRect('.u-index-anchor-wrapper')
.then((rect) => {
Object.assign(anchor, {
height: rect.height,
top: rect.top
});
})));
},
setListRect() {
return this.$uGetRect('.u-index-bar').then((rect) => {
Object.assign(this, {
height: rect.height,
top: rect.top + this.scrollTop
});
});
},
setSiderbarRect() {
return this.$uGetRect('.u-index-bar__sidebar').then(rect => {
this.sidebar = {
height: rect.height,
top: rect.top
};
});
},
getActiveAnchorIndex() {
const {
children
} = this;
const {
sticky
} = this;
for (let i = this.children.length - 1; i >= 0; i--) {
let itemTop = children[i].top - 100;
const preAnchorHeight = i > 0 ? children[i - 1].height : 0;
const reachTop = sticky ? preAnchorHeight : 0;
// console.log(reachTop)
if (reachTop >= itemTop) {
return i;
}
}
return -1;
},
onScroll() {
const {
children = []
} = this;
if (!children.length) {
return;
}
const {
sticky,
stickyOffsetTop,
zIndex,
scrollTop,
activeColor
} = this;
const active = this.getActiveAnchorIndex();
this.activeAnchorIndex = active;
if (sticky) {
let isActiveAnchorSticky = false;
if (active !== -1) {
isActiveAnchorSticky =
children[active].top - 100 <= 0;
}
children.forEach((item, index) => {
if (index === active) {
let wrapperStyle = '';
let anchorStyle = {
color: `${activeColor}`
};
if (isActiveAnchorSticky) {
wrapperStyle = {
height: `${children[index].height}px`
};
anchorStyle = {
position: 'fixed',
top: `${stickyOffsetTop}px`,
zIndex: `${zIndex ? zIndex : zIndex.indexListSticky}`,
color: `${activeColor}`
};
}
item.active = active;
item.wrapperStyle = wrapperStyle;
item.anchorStyle = anchorStyle;
} else if (index === active - 1) {
const currentAnchor = children[index];
const currentOffsetTop = currentAnchor.top;
const targetOffsetTop = index === children.length - 1 ?
this.top :
children[index + 1].top;
const parentOffsetHeight = targetOffsetTop - currentOffsetTop;
const translateY = parentOffsetHeight - currentAnchor.height;
const anchorStyle = {
position: 'relative',
transform: `translate3d(0, ${translateY}px, 0)`,
zIndex: `${zIndex ? zIndex : zIndex.indexListSticky}`,
color: `${activeColor}`
};
item.active = active;
item.anchorStyle = anchorStyle;
} else {
item.active = false;
item.anchorStyle = '';
item.wrapperStyle = '';
}
});
}
},
onTouchMove(event) {
this.touchmove = true;
const sidebarLength = this.children.length;
const touch = event.touches[0];
const itemHeight = this.sidebar.height / sidebarLength;
let clientY = 0;
clientY = touch.clientY;
let index = Math.floor((clientY - this.sidebar.top) / itemHeight);
if (index < 0) {
index = 0;
} else if (index > sidebarLength - 1) {
index = sidebarLength - 1;
}
this.touchmoveIndex = index;
this.scrollToAnchor(index);
},
onTouchStop() {
this.touchmove = false;
this.scrollToAnchorIndex = null;
},
scrollToAnchor(index) {
if (this.scrollToAnchorIndex === index) {
return;
}
this.scrollToAnchorIndex = index;
const anchor = this.children.find((item) => item.index === this.indexList[index]);
if (anchor) {
this.$emit('select', anchor.top);
// uni.pageScrollTo({
// duration: 0,
// scrollTop: anchor.top + this.scrollTop
// });
}
}
}
};
</script>
<style lang="scss" scoped>
@import "../libs/css/style.components.scss";
.u-index-bar {
margin-top: 45px;
position: relative
}
.u-index-bar__sidebar {
position: fixed;
top: 304px;
right: 0;
@include vue-flex;
flex-direction: column;
text-align: center;
transform: translateY(-50%);
user-select: none;
z-index: 99;
background-color: #c8c8c8;
font-family: Helvetica;
width: 24px;
}
.u-index-bar__index {
font-weight: 500;
padding: 8rpx;
font-size: 22rpx;
line-height: 1;
color: hsla(0,0%,100%,.5);
}
.u-indexed-list-alert {
position: fixed;
width: 120rpx;
height: 120rpx;
right: 90rpx;
top: 50%;
margin-top: -60rpx;
border-radius: 24rpx;
font-size: 50rpx;
color: #fff;
background-color: rgba(0, 0, 0, 0.65);
@include vue-flex;
justify-content: center;
align-items: center;
padding: 0;
z-index: 9999999;
}
.u-indexed-list-alert text {
line-height: 50rpx;
}
</style>
上一篇：uniapp 多端兼容開發遇到的問題總結（三）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/206475.html
標籤：其他