微信小程序实现左侧滑动导航栏

本文实例为大家分享了微信小程序实现左侧滑动导航栏的具体代码，供大家参考，具体内容如下

左侧滑动导航栏如图

页面结构

！-左侧滚动栏-view class=' under _ line '/view view view view style=' float : left ' class=' left ' scroll-view scroll-y scroll-with-animation scroll-left=' { { scroll length } } ' class=' height : { { WinHeight } } px ' view class=' all clear ' block wx : key=' list ' wx 33: for=' { { list } } 视图绑定tap='跳转索引' data-menuindedactive 1 ' : ' ' } } ' { { item } }/text text class=' { { indexId==index '？ 活动' : ' ' } } '/文本/视图/视图/块/视图/滚动视图/视图页面样式表。under _ line { width : 100%；边框-top: 1rpx实心# efefef}。滚动{宽度： 200rpx位置：固定；左： 0；top : 0；右边框： 1px实心# efefef}。左{ border-top : 1rpx实心# EFE fef右边框： 1px实心# efefef}。文本样式{ width: 200rpx高度： 140 rpx线高： 140 rpx文本对齐：中心；font-size : 34 rpxfont-family : PingFangSC-半加粗；color: rgba(51，51，51，1)；} .主动1 {颜色： # 85 D1 FD；} .活动{显示：块；宽度： 50 rpx高度： 6rpx背景： # 85d 1 FD相对位置：left : 75 rpxbottom : 30 rpx } js

页面({ /** *页面的初始数据*/data: { lists: ['标题1', '标题二', '标题三', '标题四', '标题五', '标题六', '标题七', '标题八', '标题九', '标题十', '标题十一', '标题十二]，indexId: 0，}，//左侧点击事件跳转索引(e){ let index=e .当前目标。数据集。menuindex让那个=这个。setdata({ index id : index })；}, /** * 生命周期函数-监听页面加载*/onLoad:函数（选项)that=this wx。GetSystemInfo({成功：函数{那个。setdata({ Winheight : RES . window height })；} });}, /** * 生命周期函数-监听页面初次渲染完成*/onReady:函数(){ },/** *生命周期函数-监听页面显示*/OnShaw :函数(){ },/** *生命周期函数-监听页面隐藏*/onHide:函数(){ },/** *生命周期函数-监听页面卸载*/onUnload:函数(){ },/** *页面相关事件处理函数-监听用户下拉动作*/onpulldownlrefresh :函数(){ },/** *页面上拉触底事件的处理函数*/onReachBottom:函数(){ },/** *用户点击右上角分享*/onsharappmessage :函数(){ }})更多教程点击《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。