最近寫了個(gè)微信小程序項(xiàng)目，一開始不理解scroll-view用法，用的另外一種方法寫的，雖然實(shí)現(xiàn)了效果，但是代碼層面來說，不大合理，后來又通過努力，用scroll-view實(shí)現(xiàn)了效果?，F(xiàn)寫個(gè)文章做個(gè)記錄，方便自己和大家學(xué)習(xí)記錄。
效果圖請看第一張。布局：左右布局，右邊又分為上下布局。
左側(cè)是一級菜單，即為商品大類。
右上方二級菜單，是每個(gè)商品大類對應(yīng)的子類，當(dāng)點(diǎn)擊左側(cè)大類的時(shí)候，右上的子類是對應(yīng)的變化。
右下方是商品數(shù)據(jù)，即每個(gè)二級菜單對應(yīng)的商品數(shù)據(jù)。右下方粉色加粗的部分是每個(gè)商品所屬的子類標(biāo)題。
不會弄動圖，我就敘述一下完整的效果是：點(diǎn)擊左側(cè)第二個(gè)大類，展示對應(yīng)的子類，默認(rèn)是高亮第一個(gè)子類，如果點(diǎn)擊右上方對應(yīng)的子類有黑色高亮效果，并且右側(cè)下方的商品滾動到該子類對應(yīng)商品的位置。如果滾動右側(cè)下方的商品數(shù)據(jù)，右側(cè)上方的對應(yīng)子類會高亮，對應(yīng)的大類也會高亮。
為了避免點(diǎn)擊右上方二級分類的時(shí)候反復(fù)調(diào)接口的操作，所以后臺將所有的數(shù)據(jù)一次性返回給我。該頁面初始化加載數(shù)據(jù)只調(diào)用一次接口。然后前端自己將數(shù)據(jù)處理之后使用。
數(shù)據(jù)格式大致如下所示：?
classifyData: [{
id:11,
groupName: "大類1",
children: [
{
id:1,
groupName:'子類1-1',
goodsSalesList:[
{salesId: "101",salesName:'訂單1-1'},
{salesId: "102",salesName:'訂單1-2'},
]
},
{
id:2,
groupName:'子類1-2',
goodsSalesList:[
{salesId: "201",salesName:'訂單2-1'},
{salesId: "202",salesName:'訂單2-2'},
]
}
],
},{
id:22,
groupName: "大類2",
children: [
{
id:3,
groupName:'子類2-1',
goodsSalesList:[
{salesId: "301",salesName:'訂單3-1'},
{salesId: "302",salesName:'訂單3-2'},
]
},
{
id:4,
groupName:'子類2-2',
goodsSalesList:[
{salesId: "401",salesName:'訂單4-1'},
{salesId: "402",salesName:'訂單4-2'},
]
}
],
},{
id:33,
groupName: "大類3",
children: [
{
id:5,
groupName:'子類3-1',
goodsSalesList:[
{salesId: "501",salesName:'訂單5-1'},
{salesId: "502",salesName:'訂單5-2'},
]
},
{
id:4,
groupName:'子類2-2',
goodsSalesList:[]
}
],
},
],?頁面template代碼如下：
<template>
<view class="content">
<view class="ld">
<view class="left">
<view v-for="(item,index) in classifyData" :key="index" @click="setid(index)"
:class="classifyDataIndex==index?'active':'activeDefault'">
{{item.groupName}}
</view>
</view>
<view class="right">
<view class="stickyBox">
<view class="beforeActive" style="display: flex;justify-content: center;">
<template v-for="(items,index) in classifyData[classifyDataIndex].children" :key="index">
<view class="categoryName" @click="classifyActive(index,$event,items,classifyDataIndex)"
:class="activeClassify == index ? 'activeClass':'categoryName'" style="margin: 0 10px ;">{{items.groupName}}
</view>
</template>
</view>
</view>
<scroll-view :scroll-y="true" style="white-space: nowrap;height: 200px;" :scroll-into-view="clickId"
:scroll-with-animation="true" @scroll="scroll" @scrolltolower="scrolltolower ">
<template v-for="(classifyDataModel,classifyDataIndex) in classifyData" :key="classifyDataIndex">
<view class="" v-for="(item,index) in classifyDataModel.children" :key='index' :class="classifyData.length==classifyDataIndex+1&&classifyDataModel.children.length==index+1?'classifyDataMinHeght':''">
<view class="title" :id="'Index_'+classifyDataIndex+'_'+index">
<view class="">- {{item.groupName}} -</view>
</view>
<template v-if="item.goodsSalesList.length!=0">
<view class="" v-for="(dd,ee) in item.goodsSalesList" :key='ee' style="padding:30px 0;">
{{dd.salesName}}
</view>
</template>
<template v-else>
<view class="goods-details-box2" style="padding:30px 0;">暫無商品</view>
</template>
</view>
</template>
</scroll-view>
</view>
</view>
</view>
</template>?頁面script代碼如下：文章來源：http://www.zghlxwxcb.cn/news/detail-630119.html
<script>
export default {
data() {
return {
classifyData: [//數(shù)據(jù)格式
{
id:11,
groupName: "大類1",
children: [
{
id:1,
groupName:'子類1-1',
goodsSalesList:[
{salesId: "101",salesName:'訂單1-1'},
{salesId: "102",salesName:'訂單1-2'},
]
},
{
id:2,
groupName:'子類1-2',
goodsSalesList:[
{salesId: "201",salesName:'訂單2-1'},
{salesId: "202",salesName:'訂單2-2'},
]
}
],
},{
id:22,
groupName: "大類2",
children: [
{
id:3,
groupName:'子類2-1',
goodsSalesList:[
{salesId: "301",salesName:'訂單3-1'},
{salesId: "302",salesName:'訂單3-2'},
]
},
{
id:4,
groupName:'子類2-2',
goodsSalesList:[
{salesId: "401",salesName:'訂單4-1'},
{salesId: "402",salesName:'訂單4-2'},
]
}
],
},{
id:33,
groupName: "大類3",
children: [
{
id:5,
groupName:'子類3-1',
goodsSalesList:[
{salesId: "501",salesName:'訂單5-1'},
{salesId: "502",salesName:'訂單5-2'},
]
},
{
id:4,
groupName:'子類2-2',
goodsSalesList:[]
}
],
},
],
clickId: "",
classifyDataIndex: 0,//默認(rèn)展示的大類下標(biāo)
activeClassify:0,//默認(rèn)展示的子類下標(biāo)
RightTopArr:[],
}
},
onReady() {
this.getList(); //初始化加載
this.getNodesInfo();
},
onLoad() {
},
methods: {
getList() {},//此處調(diào)接口拿到數(shù)據(jù)并自行處理
setid(i) {//點(diǎn)擊大類
this.classifyDataIndex = i;
this.activeClassify=0;//子類狀態(tài)
this.clickId ='Index_'+i+'_'+0
},
classifyActive(index, event, items,classifyDataIndex){//點(diǎn)擊子類
this.classifyDataIndex=classifyDataIndex;//大類狀態(tài)與下標(biāo)一致
this.activeClassify=index;//子類狀態(tài)
this.clickId='Index_'+this.classifyDataIndex+'_'+this.activeClassify;
},
scroll(e) {//右側(cè)商品滾動
let scrollTop = e.target.scrollTop;
console.log(scrollTop,'scrollTop')
for(let index in this.RightTopArr){
let data=this.RightTopArr[index];
if(e.target.scrollTop>=data.height && index==this.RightTopArr.length-1?true:e.target.scrollTop <this.RightTopArr[parseInt(index)+1].height){
let myArrData =data.id.split("_");
this.classifyDataIndex=myArrData[1];
this.activeClassify=myArrData[2];
return ;
}
}
},
getNodesInfo() {//滾動的距離
new Promise(resolve => {
let selectorQuery = uni.createSelectorQuery();
// 獲取節(jié)點(diǎn)的位置信息
selectorQuery.selectAll('.title').boundingClientRect((rects) => {
// 如果節(jié)點(diǎn)尚未生成，rects值為[](因?yàn)橛胹electAll，所以返回的是數(shù)組)，循環(huán)調(diào)用執(zhí)行
if (!rects.length) {
setTimeout(() => {
this.getNodesInfo();
}, 10);
return;
}
// 生成之后開始添加進(jìn)去數(shù)組
rects.forEach((rect) => {
console.log(this.RightTopArr,'this.RightTopArr')
let tops=rect.top - rects[0].top;// 這里減去rects[0].top，是因?yàn)榈谝豁?xiàng)頂部不是貼到導(dǎo)航欄=>每一個(gè)商品距離頂部的高度，如果此頁面頂部沒有其他的view那就不用減去rects[0].top，自己視情況而定。
this.RightTopArr.push({height:tops,id:rect.id});
resolve();
})
}).exec()
})
},
// 滾動到底部/右邊，會觸發(fā) scrolltolower 事件
scrolltolower() {
setTimeout(() => {
// this.classifyDataIndex = this.classifyData.length;
console.log('滾動到底部了')
}, 10)
},
}
}
</script>樣式代碼如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-630119.html
<style lang="scss" scoped>
.stickyBox {
width: 80%;
display: flex;
background-color: #FFFFFF;
.beforeActive {
width: 600rpx;
height: 85rpx;
overflow: hidden;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.categoryName {
margin: 20rpx;
padding: 10rpx;
background-color: #E5E5E5;
height: 30rpx;
font-size: 20rpx;
font-weight: 400;
line-height: 28rpx;
color: #333333;
opacity: 1;
}
.activeClass {
margin: 20rpx;
padding: 10rpx;
background-color: #333333;
height: 30rpx;
font-size: 20rpx;
font-weight: 400;
line-height: 28rpx;
color: #FFFFFF;
opacity: 1;
}
}
.active {
width: 600rpx;
height: auto;
overflow: visible;
display: flex;
justify-content: flex-start;
}
}
.ld {
display: flex;
border: 1px solid black;
.left {
width: 100px;
text-align: center;
border-right: 1px dashed #007AFF;
}
.right {
flex: 1;
padding-left: 10px;
}
}
.title {
font-size: 20px;
font-weight: bold;
background-color: pink;
}
.activeDefault{
height: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.active {
background-color: darkgoldenrod;
height: 50px;
display: flex;
flex-direction: column;
align-items: center;
color: #ffffff;
justify-content: center;
}
.classifyDataMinHeght{
min-height: 100vh;
}
</style>到了這里，關(guān)于微信小程序 uniapp 電商項(xiàng)目使用scroll-view實(shí)現(xiàn)左右菜單聯(lián)動，點(diǎn)擊菜單子分類聯(lián)動對應(yīng)商品的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
