clunt
/
dingdong-mall
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改垂直类目展示，根据左侧选中类目展示对应下级类目

This commit is contained in:
donqi 2022-08-02 14:02:48 +08:00
parent d0d989826f
commit 1bd4ca5934
1 changed files with 12 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
components/multi-level-nav/vertical-nav.vue
View File

@ -9,16 +9,15 @@
</view>
</view> -->
<view class="VerticalBox" :style="'height:calc(' + containerHeight + ')'">
<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop">
<view class="cu-item" :class="item.goodsCategoryId==tabCur?'text-main-color cur':''" v-for="(item,index) in list"
<scroll-view class="VerticalNav nav">
<view class="cu-item" :class="index==tabCur?'text-main-color cur':''" v-for="(item,index) in list"
:key="index" @tap="tabSelect" :data-index="index" :data-id="item.goodsCategoryId"
:data-main-cur="item.child && item.child.length > 0 ? item.child[0].goodsCategoryId : -1">
{{item.goodsCategoryName}}
</view>
</scroll-view>
<scroll-view class="VerticalMain" scroll-y scroll-with-animation :scroll-into-view="'main-'+mainCur"
@scroll="verticalMain">
<view class="padding-top padding-lr" v-for="(type, index1) in childrenList" :key="index1"
<scroll-view class="VerticalMain">
<view class="padding-top padding-lr" v-for="(type, index1) in list[tabCur].child" :key="index1"
:id="'main-'+type.goodsCategoryId">
<view class="cu-bar bg-white bottom-border" @click="chooseNavItem(type)">
<view class="action">
@ -56,70 +55,25 @@
}
},
data() {
return {
// list: [],
childrenList: [],
return {
tabCur: 0,
mainCur: 0,
load: true,
verticalNavTop: 0,
// mainCur: 0,
// load: true,
// verticalNavTop: 0,
curNavItem: {}
}
},
onReady() {
this.loadData();
},
// onLoad() {
// this.loadData();
// },
},
methods: {
loadData() {
// this.list = await this.$api.data('categoryList');
this.tabCur = this.list[0].goodsCategoryId;
for (let i = 0; i < this.list.length; i++) {
let children = this.list[i].child;
if (children && children.length > 0) {
for (let j = 0; j < children.length; j++) {
children[j].pIndex = i;
// children[j].pId = this.list[i].id;
}
this.childrenList = this.childrenList.concat(children);
}
}
// this.tabCur = this.list[0].goodsCategoryId;
},
tabSelect(e) {
this.tabCur = e.currentTarget.dataset.id;
this.mainCur = e.currentTarget.dataset.mainCur;
this.verticalNavTop = (e.currentTarget.dataset.index - 1) * 50;
},
verticalMain(e) {
// #ifdef MP-ALIPAY
return false //支付宝小程序暂时不支持双向联动
// #endif
let that = this;
let tabHeight = 0;
if (this.load) {
for (let i = 0; i < this.childrenList.length; i++) {
let view = uni.createSelectorQuery().select("#main-" + this.childrenList[i].goodsCategoryId);
view.fields({
size: true
}, data => {
this.childrenList[i].top = tabHeight;
tabHeight = tabHeight + data.height;
this.childrenList[i].bottom = tabHeight;
}).exec();
}
this.load = false
}
let scrollTop = e.detail.scrollTop + 10;
for (let i = 0; i < this.childrenList.length; i++) {
if (scrollTop > this.childrenList[i].top && scrollTop < this.childrenList[i].bottom) {
this.verticalNavTop = (this.childrenList[i].pIndex - 1) * 50
this.tabCur = this.childrenList[i].parentCategoryId;
console.log(scrollTop + ";tabCur=" + this.tabCur)
return false
}
}
this.tabCur = e.currentTarget.dataset.index;
// this.mainCur = e.currentTarget.dataset.mainCur;
},
chooseNavItem(curNavItem) {
this.curNavItem = curNavItem;