直播商城原始碼，實現左右聯動商品分類頁面

直播商城原始碼，實現左右聯動商品分類頁面

一、搭建結構

重點：使用uniapp的scroll-view元件，如果是小程式原生開發也是這個元件；其次如果是html開發，就自己實現一個溢位滾動。

<template>
<view class="u-wrap">
<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)">
<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">
<view class="page-view">
<view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
<view class="item-title">
<text>{{item.name}}</text>
</view>
<view class="item-container">
<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1" @click="featureC(item1.cat, item1.name)">
<image v-if="item1.icon != ''" class="item-menu-image" :src="item1.icon" mode=""></image>
<view v-else class="item-menu-image row-c" style="background-color: #F4F6F8;"><text style="font-size: 20rpx;color: #d0d0d0;">載入失敗</text></view>
<view class="item-menu-name">{{item1.name}}</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>

JavaScript業務邏輯程式碼：

data() {
return {
scrollTop: 0, //tab標題的滾動條位置
oldScrollTop: 0, // tab標題的滾動條舊位置
current: 0, // 預設當前項的值
menuHeight: 0, // 左邊選單的高度
menuItemHeight: 0, // 左邊選單item的高度
itemId: '', // 欄目右邊scroll-view用於滾動的id
tabbar: JSON.parse(uni.getStorageSync('categroy')), // 渲染的資料，放在最後供你們測試
arr: [], // 儲存距離頂部高度的陣列
scrollRightTop: 0, // 右邊欄目scroll-view的滾動條高度
timer: null // 定時器
}
}

二、新增邏輯層業務

分別獲取左側和右側每一個類別的高度

我們知道，在uniapp裡面沒有window物件和dom元素，所以如果我們要獲取頁面上的一些節點資訊時，需要通過uni.createSelectorQuery()這個API來獲取，這裡不再贅述。—— 《傳送地址》

/**
* 獲取一個目標元素的高度
* @elClass 元素的類名
* @dataVal 儲存高度的物件
*/
methods: {
    getElRect(elClass, dataVal) {
new Promise((resolve, reject) => {
const query = uni.createSelectorQuery().in(this);
query.select('.' + elClass).fields({
size: true
}, res => {
// 如果節點尚未生成，res值為null，迴圈呼叫執行
if (!res) {
setTimeout(() => {
this.getElRect(elClass);
}, 10);
return;
}
this[dataVal] = res.height;
resolve();
}).exec();
})
}
}

計算右側每個分類距離頂部的高度並儲存

onReady() {
this.getMenuItemTop()
},
mehods: {
    /**
* 獲取右邊選單每個item到頂部的距離
* 儲存到 arr 陣列裡面用於後面滾動判斷
*/
getMenuItemTop() {
new Promise(resolve => {
let selectorQuery = uni.createSelectorQuery();
selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
// 如果節點尚未生成，rects值為[](因為用selectAll，所以返回的是陣列)，迴圈呼叫執行
if(!rects.length) {
setTimeout(() => {
this.getMenuItemTop();
}, 10);
return ;
}
rects.forEach((rect) => {
// 視情況而定，這裡減去rects[0].top，是因為第一項頂部可能不是貼到導航欄(比如有個搜尋框的情況)
// this.arr.push(rect.top - rects[0].top);
this.arr.push(rect.top)
resolve();
})
}).exec()
})
},
}

以上就是直播商城原始碼，實現左右聯動商品分類頁面， 更多內容歡迎關注之後的文章