直播商城源码，实现左右联动商品分类页面

一、搭建结构

重点：使用uniapp的scroll-view组件，如果是小程序原生开发也是这个组件；其次如果是html开发，就自己实现一个溢出滚动。

<br><template><br><view class="u-wrap"><br><view class="u-menu-wrap"><br><scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"<br> :scroll-into-view="itemId"><br><view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']"<br> @tap.stop="swichMenu(index)"><br><text class="u-line-1">{{item.name}}</text><br></view><br></scroll-view><br><scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll"><br><view class="page-view"><br><view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index"><br><view class="item-title"><br><text>{{item.name}}</text><br></view><br><view class="item-container"><br><view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1" @click="featureC(item1.cat, item1.name)"><br><image v-if="item1.icon != ''" class="item-menu-image" :src="item1.icon" mode=""></image><br><view v-else class="item-menu-image row-c" style=""><text style="font-size: 20rpx;color: #d0d0d0;">加载失败</text></view><br><view class="item-menu-name">{{item1.name}}</view><br></view><br></view><br></view><br></view><br></scroll-view><br></view><br></view><br></template>

JavaScript业务逻辑代码：

<br>data() {<br>return {<br>scrollTop: 0, //tab标题的滚动条位置<br>oldScrollTop: 0, // tab标题的滚动条旧位置<br>current: 0, // 预设当前项的值<br>menuHeight: 0, // 左边菜单的高度<br>menuItemHeight: 0, // 左边菜单item的高度<br>itemId: '', // 栏目右边scroll-view用于滚动的id<br>tabbar: JSON.parse(uni.getStorageSync('categroy')), // 渲染的数据，放在最后供你们测试<br>arr: [], // 储存距离顶部高度的数组<br>scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度<br>timer: null // 定时器<br>}<br>}

二、添加逻辑层业务

分别获取左侧和右侧每一个类别的高度

我们知道，在uniapp里面没有window对象和dom元素，所以如果我们要获取页面上的一些节点信息时，需要通过uni.createSelectorQuery()这个API来获取，这里不再赘述。—— 《传送地址》

<br>/**<br>* 获取一个目标元素的高度<br>* @elClass 元素的类名<br>* @dataVal 储存高度的对象<br>*/<br>methods: {<br>    getElRect(elClass, dataVal) {<br>new Promise((resolve, reject) => {<br>const query = uni.createSelectorQuery().in(this);<br>query.select('.' + elClass).fields({<br>size: true<br>}, res => {<br>// 如果节点尚未生成，res值为null，循环调用执行<br>if (!res) {<br>setTimeout(() => {<br>this.getElRect(elClass);<br>}, 10);<br>return;<br>}<br>this[dataVal] = res.height;<br>resolve();<br>}).exec();<br>})<br>}<br>}

计算右侧每个分类距离顶部的高度并保存

onReady() {<br>this.getMenuItemTop()<br>},<br>mehods: {<br>    /**<br>* 获取右边菜单每个item到顶部的距离<br>* 储存到 arr 数组里面用于后面滚动判断<br>*/<br>getMenuItemTop() {<br>new Promise(resolve => {<br>let selectorQuery = uni.createSelectorQuery();<br>selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {<br>// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行<br>if(!rects.length) {<br>setTimeout(() => {<br>this.getMenuItemTop();<br>}, 10);<br>return ;<br>}<br>rects.forEach((rect) => {<br>// 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)<br>// this.arr.push(rect.top - rects[0].top);<br>this.arr.push(rect.top)<br>resolve();<br>})<br>}).exec()<br>})<br>},<br>}

以上就是直播商城源码，实现左右联动商品分类页面，更多内容欢迎关注之后的文章