1.wxml代码：
<view> <import src="" /> <!-- 左侧滚动栏 --> <view></view> <view> <view> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}"> <view> <block wx:key="tabs" wx:for="{{tabs}}"> <view bindtap='jumpIndex' data-menuindex='{{index}}'data-anchor='{{item.anchor}}'> <view> <text>{{item.title}}</text> </view> </view> </block> </view> </scroll-view> </view> <view> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" bindscroll="scrollToLeft" scroll-into-view="{{toTitle}}"> <block wx:key="tabs" wx:for="{{tabs}}"> <view> <view>{{item.title}}</view> <view wx:for="{{tabsList[item.anchor]}}"> <template is="cateringItem" data="{{...item}}" /> </view> </view> </block> </scroll-view> </view> </view> </view>
2.wxss代码：
@import "../../components/catering-item/catering-item.wxss"; /* pages/catering.wxss */ .page { display: flex; flex-direction: column; width: 100%; /* background: #F7F4F8; */ background-image: linear-gradient(90deg, #FCFCFC 0%, #FCFCFC 99%); /* padding-top: 16px; */ } .under_line{ width: 100%; border-top: 1rpx solid #efefef; } ::-webkit-scrollbar{ width: 0; height: 0; color: transparent; } .body{ display: flex; width: 100%; } .scrollY { width: 200rpx; /* position: fixed; left: 0; top: 0; */ background: #F5F5F5; /* border-right: 1rpx solid #efefef; */ } /* scrollRight{ flex: 1; } */ .right{ flex: 1; /* height: 200rpx; */ /* background: #00FF00; */ } .left { border-top: 1rpx solid #efefef; border-right: 1rpx solid #efefef; } .text-style { width: 200rpx; height: 100rpx; line-height: 100rpx; text-align: center; font-size: 28rpx; font-family: PingFangSC-Semibold; color: rgba(51, 51, 51, 1); } .active1 { color: #E5D1A9; /* background: #FFF; */ } .activeView{ background: #FFF; } .active { display: block; width: 50rpx; height: 6rpx; background: #E5D1A9; position: relative; left: 75rpx; bottom: 30rpx; } .title{ margin-left: 32rpx; padding-top: 16rpx; font-size: 28rpx; /* padding-bottom: 16rpx; */ }
3.js代码
// pages/catering.js Page({ /** * 页面的初始数据 */ data: { tabs: [ { title: '特惠', anchor: 'a', }, { title: '必点', anchor: 'b', }, { title: '营养汤', anchor: 'c', }, { title: '主食', anchor: 'd', }, { title: '套餐', anchor: 'e', }, { title: '饮料', anchor: 'f', }, ], tabsList: { a: [{ price: 10.1, anchor: "a", index: 0, num: 0 }, { price: 10.2, anchor: "a", index: 1, num: 0 }, { price: 10.3, anchor: "a", index: 2, num: 0 },], b: [{ price: 10.4, anchor: "b", index: 0, num: 0 }, { price: 10.5, anchor: "b", index: 1, num: 0 }, { price: 10.6, anchor: "b", index: 2, num: 0 },], c: [{ price: 10.7, anchor: "c", index: 0, num: 0 }, { price: 10.8, anchor: "c", index: 1, num: 0 }, { price: 10.9, anchor: "c", index: 2, num: 0 },], d: [{ price: 11.0, anchor: "d", index: 0, num: 0 }, { price: 11.1, anchor: "d", index: 1, num: 0 }, { price: 11.2, anchor: "d", index: 2, num: 0 },], e: [{ price: 11.3, anchor: "e", index: 0, num: 0 }, { price: 11.4, anchor: "e", index: 1, num: 0 }, { price: 11.5, anchor: "e", index: 2, num: 0 },], f: [{ price: 11.6, anchor: "f", index: 0, num: 0 }, { price: 11.7, anchor: "f", index: 1, num: 0 }, { price: 11.8, anchor: "f", index: 2, num: 0 },] }, indexId: 0, toTitle:"title-c", scrollTop:0, top:[], }, // 左侧点击事件 jumpIndex(e) { let index = e.currentTarget.dataset.menuindex; let anchor = e.currentTarget.dataset.anchor; let that = this that.setData({ indexId: index, toTitle: "title-" + anchor }); //可以设置定位事件 }, scrollToLeft(res){ console.log("scrollToLeft-res:" + JSON.stringify(res) + JSON.stringify(this.data.top)); // let top=res.detail.scrollTop; this.setData({ scrollTop: res.detail.scrollTop }) var length = this.data.top.length; for(var i=0;i<this.data.top.length;i++){ if (this.data.top[i] - this.data.top[0] <= this.data.scrollTop && (i < length - 1 && this.data.top[i + 1] - this.data.top[0] > this.data.scrollTop)){ if(this.data.indexId!=i){ this.setData({ indexId: i, }); } } } // console.log("top:"+top); }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this wx.getSystemInfo({ success: function (res) { that.setData({ winHeight: res.windowHeight }); var top2=new Array(); for(var i=0;i<that.data.tabs.length;i++){ wx.createSelectorQuery().select('#view-' + that.data.tabs[i].anchor).boundingClientRect(function (rect) { var isTop=Number(rect.top); top2.push(isTop); console.log("view-c:" + JSON.stringify(rect)); }).exec(); } that.setData({ top: top2 }); } }); }, })
说明：
wxml中的template是菜品的item，可根据自己的需求进行定义。