wxml
<view> <scroll-view scroll-y scroll-with-animation="true" scroll-top="{{leftMenuTop}}"> <view wx:for="https://www.jb51.net/{{item}}" wx:key="{{item.index}}" catchtap='changeMenu' >{{item.typename}}</view> </scroll-view> <scroll-view v-if="item!=''" bindscroll = "scroll" scroll-y scroll-with-animation="true" scroll-top="{{rightProTop}}"> <view wx:for="https://www.jb51.net/{{item}}"> <view>{{item.typename}}</view> <view> <view wx:for="{{item.shop_goods}}" wx:key="{{index}}"> <image lazy-load="true" src="https://www.jb51.net/{{item}}"></image> <text>{{item.goodname}}</text> </view> </view> </view> </scroll-view> </view>
wxss
.left-menu{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 180rpx; background-color: #f8f8f8; font-size: 32rpx; } ::-webkit-scrollbar{ width: 0; height: 0; color: transparent; } .left-menu .menu-item{ width: calc(100% - 16rpx); height: 80rpx; padding:0 8rpx; line-height: 80rpx; text-align: center; } .left-menu .menu-item.menu-active{ border-left:8rpx solid red; padding-left: 0; background-color: #fff; } /* 右边商品区域 */ .right-pro{ position: absolute; left: 180rpx; top:0; bottom: 0; width:calc(100% - 180rpx); background-color: #fff; display: flex; overflow: hidden; } .right-pro .pro-item{ padding:20rpx; } .right-pro .item-header{ display: inline-block; font-size: 30rpx; line-height: 40rpx; color: #fff; background-color: red; padding:0rpx 30rpx; margin: 10rpx auto; } .right-pro .pro-item-container{ font-size: 28rpx; } .pro-item-item{ width: calc((100% - 180rpx) / 2 ); display:inline-block; } .right-pro .pro-item-container image{ width: 100rpx; height: 100rpx; display: block; margin: 0 auto; } .right-pro .pro-item-container text{ display: block; text-align: center; }
wxjs
let proListToTop = [], menuToTop = [], MENU = 0, windowHeight,timeoutId; // MENU ==> 是否为点击左侧进行滚动的，如果是，则不需要再次设置左侧的激活状态 Page({ data: { proList: [], item: [], item2:[ { "typename": "服饰", }, { "typename": "服饰", }, { "typename": "服饰", }, { "typename": "服饰", }, { "typename": "服饰", }, { "typename": "服饰", }, { "typename": "服饰", }, { "typename": "服饰", }, { "typename": "服饰", }, { "typename": "服饰", }, { "typename": "服饰", }, { "typename": "服饰", }, { "typename": "服饰", }, { "typename": "服饰", }, { "typename": "服饰", }, { "typename": "服饰", }, { "typename": "服饰", }, { "typename": "服饰", }, ], currentActiveIndex: 0 }, onLoad: function (options) { // ---------------------------ajax---------------------- var utilMd5 = require('../../utils/md5.js'); var md5 = utilMd5.hexMD5; var timestamp = new Date().getTime(); var that = this; var jsonStr = JSON.stringify({ "shopid": "34" }); var token = md5(jsonStr + timestamp) + timestamp; wx.request({ url: "https://api.jvjiewang.com/Home/Shop/goods", data: { jsonStr: jsonStr, token: token }, method: 'POST', header: { "Content-Type": "application/x-www-form-urlencoded" }, success: function (res) { console.log(res.data.respond); var items = res.data.respond; that.setData({ item: items }) } }) //----------------------------ajax---------------------- // 确保页面数据已经刷新完毕~ setTimeout(() => { this.getAllRects() }, 200) }, changeMenu(e) { // 改变左侧tab栏操作 if (Number(e.target.id) === this.data.currentActiveIndex) return MENU = 1 this.setData({ currentActiveIndex: Number(e.target.id), rightProTop: proListToTop[Number(e.target.id)] }) this.setMenuAnimation(Number(e.target.id)) }, scroll(e) { for (let i = 0; i < proListToTop.length; i++) { if (e.detail.scrollTop < proListToTop[i] && i !== 0 && e.detail.scrollTop > proListToTop[i - 1]) { return this.setDis(i) } } // 找不到匹配项，默认显示第一个数据 if (!MENU) { this.setData({ currentActiveIndex: 0 }) } MENU = 0 }, setDis(i) { // 设置左侧menu栏的选中状态 if (i !== this.data.currentActiveIndex + 1 && !MENU) { this.setData({ currentActiveIndex: i - 1 }) } MENU = 0 this.setMenuAnimation(i) }, setMenuAnimation(i){ // 设置动画，使menu滚动到指定位置。 let self = this if (menuToTop[i]) { console.log(11111) // 节流操作 if(timeoutId){ clearTimeout(timeoutId) } timeoutId = setTimeout(()=>{ console.log(12138) self.setData({ leftMenuTop: (menuToTop[i].top - windowHeight) }) },50) } else { if (this.data.leftMenuTop === 0) return this.setData({ leftMenuTop: 0 }) } }, getActiveReacts(){ wx.createSelectorQuery().selectAll('.menu-active').boundingClientRect(function (rects) { return rects[0].top }).exec() }, getAllRects() { // 获取商品数组的位置信息 wx.createSelectorQuery().selectAll('.pro-item').boundingClientRect(function (rects) { rects.forEach(function (rect) { proListToTop.push(rect.top) }) }).exec() // 获取menu数组的位置信息 wx.createSelectorQuery().selectAll('.menu-item').boundingClientRect(function (rects) { wx.getSystemInfo({ success: function (res) { windowHeight = res.windowHeight / 2 rects.forEach(function (rect) { menuToTop.push({ top: rect.top, // animate:rect.top > windowHeight }) }) } }) }).exec() }, // 获取系统的高度信息 getSystemInfo() { let self = this wx.getSystemInfo({ success: function (res) { windowHeight = res.windowHeight / 2 } }) } })