|
|
|
@ -8,22 +8,25 @@ |
|
|
|
|
</view> |
|
|
|
|
<view class="u-menu-wrap"> |
|
|
|
|
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop" |
|
|
|
|
: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)"> |
|
|
|
|
: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> |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll"> |
|
|
|
|
<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" |
|
|
|
|
@scroll="rightScroll"> |
|
|
|
|
<view class="page-view"> |
|
|
|
|
<view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index"> |
|
|
|
|
<view class="item-box" v-for="(item1, index1) in item.children" :key="index1" > |
|
|
|
|
<view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index"> |
|
|
|
|
<view class="item-box" v-for="(item1, index1) in item.children" :key="index1"> |
|
|
|
|
<view class="item-title"> |
|
|
|
|
<text>{{item1.name}}</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="item-container"> |
|
|
|
|
<view class="thumb-box" @click="goodsDetail(item2)" v-for="(item2, index2) in item1.children" :key="index2"> |
|
|
|
|
<image class="item-menu-image" :src="item2.image?item2.image.external_url:''" mode=""></image> |
|
|
|
|
<view class="thumb-box" @click="goodsDetail(item2)" |
|
|
|
|
v-for="(item2, index2) in item1.children" :key="index2"> |
|
|
|
|
<image class="item-menu-image" :src="item2.image?item2.image.external_url:''" |
|
|
|
|
mode=""></image> |
|
|
|
|
<view class="item-menu-name">{{item2.name}}</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
@ -51,7 +54,7 @@ |
|
|
|
|
arr: [], |
|
|
|
|
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度 |
|
|
|
|
timer: null, // 定时器 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onLoad() { |
|
|
|
@ -75,16 +78,18 @@ |
|
|
|
|
}, |
|
|
|
|
// 点击左边的栏目切换 |
|
|
|
|
async swichMenu(index) { |
|
|
|
|
if(this.arr.length == 0) { |
|
|
|
|
console.log(index) |
|
|
|
|
if (this.arr.length == 0) { |
|
|
|
|
await this.getMenuItemTop(); |
|
|
|
|
} |
|
|
|
|
if (index == this.current) return; |
|
|
|
|
this.scrollRightTop = this.oldScrollTop; |
|
|
|
|
this.$nextTick(function(){ |
|
|
|
|
this.scrollRightTop = this.arr[index]; |
|
|
|
|
this.$nextTick(function() { |
|
|
|
|
this.current = index; |
|
|
|
|
this.scrollRightTop = this.arr[index]; |
|
|
|
|
this.leftMenuStatus(index); |
|
|
|
|
}) |
|
|
|
|
console.log(index, this.current) |
|
|
|
|
}, |
|
|
|
|
getGoodsTypeList() { |
|
|
|
|
const that = this; |
|
|
|
@ -143,10 +148,10 @@ |
|
|
|
|
await this.getElRect('menu-scroll-view', 'menuHeight'); |
|
|
|
|
await this.getElRect('u-tab-item', 'menuItemHeight'); |
|
|
|
|
} |
|
|
|
|
this.current = index; |
|
|
|
|
// this.current = index+1; |
|
|
|
|
// 将菜单活动item垂直居中 |
|
|
|
|
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
// 获取右边菜单每个item到顶部的距离 |
|
|
|
|
getMenuItemTop() { |
|
|
|
@ -154,11 +159,11 @@ |
|
|
|
|
let selectorQuery = uni.createSelectorQuery(); |
|
|
|
|
selectorQuery.selectAll('.class-item').boundingClientRect((rects) => { |
|
|
|
|
// 如果节点尚未生成,rects值为[](因为用selectAll,所以返回的是数组),循环调用执行 |
|
|
|
|
if(!rects.length) { |
|
|
|
|
if (!rects.length) { |
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.getMenuItemTop(); |
|
|
|
|
}, 10); |
|
|
|
|
return ; |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
rects.forEach((rect) => { |
|
|
|
|
// 这里减去rects[0].top,是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况) |
|
|
|
@ -171,11 +176,11 @@ |
|
|
|
|
// 右边菜单滚动 |
|
|
|
|
async rightScroll(e) { |
|
|
|
|
this.oldScrollTop = e.detail.scrollTop; |
|
|
|
|
if(this.arr.length == 0) { |
|
|
|
|
if (this.arr.length == 0) { |
|
|
|
|
await this.getMenuItemTop(); |
|
|
|
|
} |
|
|
|
|
if(this.timer) return ; |
|
|
|
|
if(!this.menuHeight) { |
|
|
|
|
if (this.timer) return; |
|
|
|
|
if (!this.menuHeight) { |
|
|
|
|
await this.getElRect('menu-scroll-view', 'menuHeight'); |
|
|
|
|
} |
|
|
|
|
setTimeout(() => { // 节流 |
|
|
|
@ -188,7 +193,7 @@ |
|
|
|
|
// 如果不存在height2,意味着数据循环已经到了最后一个,设置左边菜单为最后一项即可 |
|
|
|
|
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) { |
|
|
|
|
this.leftMenuStatus(i); |
|
|
|
|
return ; |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, 10) |
|
|
|
@ -287,12 +292,15 @@ |
|
|
|
|
.class-item:last-child { |
|
|
|
|
min-height: 100vh; |
|
|
|
|
} |
|
|
|
|
.item-box{ |
|
|
|
|
|
|
|
|
|
.item-box { |
|
|
|
|
margin-top: 30rpx; |
|
|
|
|
&:first-child{ |
|
|
|
|
|
|
|
|
|
&:first-child { |
|
|
|
|
margin-top: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.item-title { |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
color: $u-main-color; |
|
|
|
|