1、左侧滑动导航栏图如下
2、这是我们左侧滚动栏的代码 wxml <view class='under_line'></view> <view style='float: left' class='left'> <scroll-view scroll-y scroll-left="{{scrollLength}}" class='scrollY' style='height: {{winHeight}}px'> <view class='all clear'> <block wx:key="lists" wx:for="{{lists}}"> <view bindtap='jumpIndex' data-menuindex='{{index}}' id="{{item.id}}"> <view id='text-style' class="{{indexId==index?'active1':''}}"> <text>{{item.name}}</text> <text class="{{indexId==index?'active':''}}"></text> </view> </view> </block> </view> </scroll-view> </view> 3,、我们滚动栏的css样式 wxss /* 左侧导航栏 */ .under_line{ width: 100%; } .scrollY { width: 200rpx; position: fixed; left: 0; top: 90rpx; } #text-style { width: 100%; height: 120rpx; line-height: 120rpx; text-align: center; font-size: 34rpx; font-family: PingFangSC-Semibold; color: gray; box-sizing: border-box; } .active1 { /* color: #85d1fd; */ border-left: 3px solid red; color: red !important; } .active { display: block; width: 50rpx; height: 6rpx; color: red; position: relative; left: 75rpx; bottom: 30rpx; }3、接着是我们js逻辑代码
Page({ /** * 页面的初始数据 */ data: { lists: [ "上衣"，"连衣裙"，"写"，"裤子"，"背包" ], indexId: 0, }, // 左侧点击事件 jumpIndex(e) { let index = e.currentTarget.dataset.menuindex let that = this that.setData({ indexId: index }); }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { var that = this wx.getSystemInfo({ success: function(res) { that.setData({ winHeight: res.windowHeight }); } }); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { }, 这样我们的侧边滚动栏就完成了