|
|
|
@ -13,7 +13,8 @@ |
|
|
|
|
<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-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" |
|
|
|
|
@scroll="rightScroll"> |
|
|
|
|
<view class="page-view"> |
|
|
|
|
<view class="class-item"> |
|
|
|
|
<view class="item-box" v-for="(item1, index1) in tabbarList.children" :key="index1"> |
|
|
|
@ -45,6 +46,7 @@ |
|
|
|
|
tabbar: [], |
|
|
|
|
tabbarList: [], |
|
|
|
|
scrollRightTop: 0, |
|
|
|
|
oldScrollTop: 0, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onLoad() { |
|
|
|
@ -70,8 +72,12 @@ |
|
|
|
|
async swichMenu(index) { |
|
|
|
|
this.tabbarList = [] |
|
|
|
|
this.current = index; |
|
|
|
|
this.scrollRightTop = this.oldScrollTop; |
|
|
|
|
this.tabbarList = this.tabbar[index]; |
|
|
|
|
this.$nextTick(function() { |
|
|
|
|
this.getMenuItemTop() |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
getGoodsTypeList() { |
|
|
|
|
const that = this; |
|
|
|
@ -80,20 +86,26 @@ |
|
|
|
|
// is_hot: 0 |
|
|
|
|
}) |
|
|
|
|
.then(res => { |
|
|
|
|
// 合并新数据 |
|
|
|
|
console.log(res, '分类数据') |
|
|
|
|
that.tabbar = res.data.list; |
|
|
|
|
that.tabbarList = res.data.list[0] |
|
|
|
|
}) |
|
|
|
|
.catch(reject) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 右边菜单滚动 |
|
|
|
|
async rightScroll(e) { |
|
|
|
|
this.oldScrollTop = e.detail.scrollTop; |
|
|
|
|
}, |
|
|
|
|
// 获取右边菜单每个item到顶部的距离 |
|
|
|
|
getMenuItemTop() { |
|
|
|
|
let that = this |
|
|
|
|
new Promise(resolve => { |
|
|
|
|
let selectorQuery = uni.createSelectorQuery(); |
|
|
|
|
selectorQuery.selectAll('.class-item').boundingClientRect((rects) => { |
|
|
|
|
rects.forEach((rect) => { |
|
|
|
|
console.log(rects[0].top) |
|
|
|
|
this.scrollRightTop = rects[0].top |
|
|
|
|
that.scrollRightTop = rect.top - rects[0].top |
|
|
|
|
resolve(); |
|
|
|
|
}) |
|
|
|
|
}).exec() |
|
|
|
@ -179,6 +191,7 @@ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.page-view { |
|
|
|
|
padding: 0 16rpx 16rpx; |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|