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