前言
在使用uView開發項目中，遇到了一個業務場景： 點擊輸入框彈出底部窗口，內置電話號碼區號索引列表，點擊切換區號 :
javascript
當我根據邏輯覺得在 u-popup 里加入 u-index-list 就好了，結果遇到問題了：css
- 索引列表滾動不了；
- 選擇索引字符，列表吸頂不了；
- 瞄點與頂部距離有誤差。
因此做者開始排查，但api文檔沒寫相關用法，因而開始百度，但發現你們都在詢問…（可能你們也百度過這類文章：https://ask.dcloud.net.cn/question/103729）html
官網也沒有合適滿意的解決方案，因而做者只能去修改源碼了…vue
1. 滾動不了
一開始很奇怪，看人家實例是能夠滾動，但在u-popup不行，原來文檔寫了onPageScroll這個方法的，是針對整個頁面去滾動的：
java
因此針對業務場景，這個方法就不適用了，首先是想到在u-popup裏面加入一層scroll-view，但沒用… 看文檔得知原來組件裏已內置了（仍是要好好看文檔呀~），因此這個也是無效的。小程序
解決方法：監聽彈出層的滾動，利用子組件把彈出層的scrollTop傳給父組件裏的u-index-listapi
- 在u-popup組件裏找到這段代碼，添加事件scroll：
- 在方法裏獲取
u-popup的scrollTop： - 父組件再賦值：
2. 吸頂不了
首先找出目標代碼，在u-index-list裏：
這裏是針對整個頁面去滾動吸頂的，因此同理把這段代碼去掉，把容器距離頂部的高度傳給父組件：
把u-popup滾動高與容器的高度添加：
數組
3. 高度誤差：
定位到目標代碼：
安全
備註： 修改源碼前要先理解源碼的邏輯噢~bash
而後根據你彈出層的高度進行增減就行啦。
下面是完整代碼：
<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>