pdkj
/
jiqu-library-miniprogram
6
0
Fork 0
Code Releases Activity

修改滑动选中效果

hui.zhou
H 2022-07-20 15:18:21 +08:00
parent 7ef8893e54
commit 42ae27200b
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/sort/index.vue
View File

@ -20,14 +20,15 @@
:scroll-into-view="itemId">
<view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
:class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
<text class="u-line-1">{{ item.name }}</text>
<text class="u-line-1">{{ item.name }}{{current}}</text>
</view>
</scroll-view>
<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
@scroll="rightScroll">
<view class="page-view">
<block v-for="(item, index) in tabbar" :key="index">
<view class="class-item" :id="'item' + index" v-for="(item1, index1) in item.children"
<view class="classSel" :id="'item' + index">
<view class="class-item" v-for="(item1, index1) in item.children"
:key="index1">
<view class="item-title">
<text>{{ item1.name }}</text>
@ -44,6 +45,7 @@
</view>
</view>
</view>
</view>
</block>
</view>
</scroll-view>
@ -155,7 +157,7 @@ export default {
getMenuItemTop() {
new Promise(resolve => {
let selectorQuery = uni.createSelectorQuery();
selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
selectorQuery.selectAll('.classSel').boundingClientRect((rects) => {
// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
if (!rects.length) {
setTimeout(() => {
@ -173,7 +175,11 @@ export default {
},
// 右边菜单滚动
async rightScroll(e) {
this.oldScrollTop = e.detail.scrollTop;
if(e.detail.scrollTop<20){
this.swichMenu(0)
return
}
this.oldScrollTop = e.detail.scrollTop;
if (this.arr.length == 0) {
await this.getMenuItemTop();
}
@ -186,8 +192,10 @@ export default {
// scrollHeight为右边菜单垂直中点位置
let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
for (let i = 0; i < this.arr.length; i++) {
let height1 = this.arr[i];
let height2 = this.arr[i + 1];
// console.log(this.arr,height1,height2,'@@@@',scrollHeight)
// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
this.leftMenuStatus(i);
@ -210,7 +218,7 @@ export default {
.u-wrap {
height: calc(100vh);
/* #ifdef H5 */
height: calc(100vh - var(--window-top));
height: calc(100vh - var(--window-top));
/* #endif */
display: flex;
flex-direction: column;