通過(guò)點(diǎn)擊左側(cè)菜單選項(xiàng)卡埃唯，右側(cè)內(nèi)容區(qū)域滾動(dòng)到對(duì)應(yīng)的高度位置琢蛤，同樣，右側(cè)內(nèi)容區(qū)域滾動(dòng)一定的距離后蜂嗽，左側(cè)選項(xiàng)卡需要判斷右側(cè)內(nèi)容是屬于左側(cè)哪個(gè)選項(xiàng)卡的內(nèi)容苗膝。
1、左側(cè)菜單點(diǎn)擊事件的處理
- data選項(xiàng)數(shù)據(jù)為：
data() {
return {
cateList: [], //左側(cè)分類列表
current: 0, //當(dāng)前點(diǎn)擊項(xiàng)
rectInfoList:[],
tempCurrent:0,
scrollTop:0,//左側(cè)導(dǎo)航欄距離頂部的位置
}
},
- 左側(cè)菜單使用scroll-view渲染
<!-- 左側(cè)菜單選項(xiàng) -->
<scroll-view :scroll-top="scrollTop" class="cate-left" scroll-y="true" show-scrollbar="false">
<view class="cate-item" :class="{active:current==index}" v-for="(item,index) in cateList" @click="menuTab(index)"
:key="item.id">
{{item.catename}}
</view>
</scroll-view>
通過(guò)動(dòng)態(tài)類樣式完成將current值與index索引綁定植旧，以及通過(guò)menuTab將index索引下標(biāo)值作為參數(shù)傳入辱揭。
添加scroll-top屬性芋类，每次切換菜單，都讓滾動(dòng)條與頂部保持一定的距離
2界阁、右側(cè)內(nèi)容區(qū)域通過(guò)uni.createSelectorQuery()獲取元素盒子的高度值
- 右側(cè)內(nèi)容區(qū)域
<!-- 右側(cè)對(duì)應(yīng)的商品展示 -->
<view class="cate-right">
<scroll-view :scroll-into-view="'cate'+tempCurrent" class="cate-right-scroll" scroll-y="true" show-scrollbar="false" @scroll="getCurrentHeight">
<view :id="'cate'+index" v-for="(item,index) in cateList" :key="item.id" class="cate-right-item">
<view class="cate-title">
--<text>{{item.catename}}</text>--
</view>
<view v-for="(el,index) in item.product" :key="el.id" class="cate-right-img">
<image :src="imgUrl + el.mainimage"></image>
<text>{{el.smalltitle}}</text>
</view>
</view>
<view style="height: 30rpx;"></view>
</scroll-view>
</view>
- 獲取不同的id值的高度
與H5類似侯繁，通過(guò)id選擇器去獲取元素的寬，高的詳細(xì)信息泡躯，一開(kāi)始top為0贮竟，高度值賦給bottom,然后下一次就變?yōu)樯弦粋€(gè)元素的bottom值就是下一個(gè)元素的top值，遍歷完成后较剃，把值整個(gè)存在一個(gè)數(shù)組中咕别，作為對(duì)象數(shù)組進(jìn)行存儲(chǔ)。
- 獲取不同的id值的高度
// 獲取與頂部之間的距離
getRectInfo() {
var top = 0;
var bottom = 0;
var temp = 0;
for (var i = 0; i < this.cateList.length; i++) {
let view = uni.createSelectorQuery().in(this).select("#cate"+i);
view.fields({
size: true,
rect: true
}, data => {
top = temp;
bottom = top + data.height;
temp = bottom;
this.rectInfoList[i] = {
'top':top,
'bottom':bottom
}
// console.log(top, bottom);
}).exec();
}
console.log(this.rectInfoList);
},
3写穴、右側(cè)內(nèi)容區(qū)滑動(dòng)時(shí)判斷對(duì)應(yīng)的左側(cè)索引下標(biāo)值
當(dāng)右側(cè)滑動(dòng)內(nèi)容時(shí)惰拱，需要使用@scroll事件綁定在scroll-view上，然后e.detail.scrollTop獲取到的就是當(dāng)前內(nèi)容距離頂部之間的距離啊送，通過(guò)拿到這個(gè)距離偿短，再去與存儲(chǔ)在數(shù)組中的每個(gè)模塊的top,bottom值去匹配，如果currentHeight(也就是當(dāng)前的距離頂部的高度)滿足其中的范圍馋没，那么就將對(duì)應(yīng)的index索引賦值到左側(cè)菜單上去昔逗。
getCurrentHeight(e){
var currentHeight = e.detail.scrollTop;
this.rectInfoList.forEach((item,index)=>{
if(currentHeight >= item.top && currentHeight <= item.bottom){
// 當(dāng)前獲取的盒子高度大于top小于bottom，判定將索引傳至左側(cè)菜單導(dǎo)航
this.current = index;
this.scrollTop = index * uni.upx2px(100);
}
})
}
4篷朵、清空默認(rèn)的滾動(dòng)條
想要清空默認(rèn)的滾動(dòng)條勾怒，在scroll-view中需要加入show-scrollbar="false"以及在對(duì)應(yīng)的style樣式中去加入樣式代碼。
/deep/::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
5声旺、注意點(diǎn)
值得一提的是getRectInfo函數(shù)需要在dom樹(shù)渲染完成后才可以進(jìn)行調(diào)用笔链，否則dom樹(shù)還未生成，獲取到的信息是null腮猖，因此鉴扫，需要使用一個(gè)定時(shí)器去異步調(diào)用。并且該方法只能在mounted生命周期中去使用缚够。
mounted() {
setTimeout(() => {
this.getRectInfo();
}, 200)
},
