效果图

。页面结构

view class=' tabbbar ' view class=' tabItem wx : if=' { { tabbclick===0？单击" :"} } " "绑定tap="ClickTab "数据-索引=" 0 " Tab 1/view view class=" TabItem wx : if=" { { TabClick===1？"单击" :"} } " "绑定tap="ClickTab "数据-索引="1 "选项卡2/视图视图类="选项卡项目wx : if="{ { tabClick===2？"单击" :"} } " "绑定tap="ClickTab "数据-索引=" 2 " Tab 3/视图视图类="下划线" animation=" { { animation data } } " style=" left : { { ISelft } } "/view/view。页面样式表。tabBar { height: 80rpx背景色-: # 50B7EA；宽度： 100%;font-size : 28 rpxcolor: rgba(255，255，255，0.50)；位置：固定；top : 0；左： 0；display : flex justice-内容中心：align-items:居中；z指数： 997；}.tabi tem { width : 33.333%；display : flex align-content :居中；正义-内容：中心；相对位置：高度： 100%;font-size : 28 rpx}.点击{ color: white}。下划线{位置：绝对值；内容： " "；宽度： 84 rpx高度： 3px背景-颜色：白色；底部： 0；} .射流研究…

数据：{tabClick: 0，animationData: } }，isLeft: '12%'}，swiperTab:函数{var那=thisvar索引=e . detail。当前控制台。日志(例如详细信息。当前)var动画=wx。创建动画({持续时间： 1000，timingFunction: ' ease '，})这一点。动画=动画if(index===0){动画。翻译(0，0).step()；那个。setdata({ animationdata :动画。export()})那个。setdata({ tab单击： e . detail。当前})；} else if(index===1){ var w=wx。getsysteminfosync().window width w=w * 0.32 animation . translate(w，0).step()；那个。setdata({ animationdata :动画。export()})那个。setdata({ tab单击： e . detail。当前})；} else if(index===2){ var w=wx。getsysteminfosync().window width w=w * 0.65 animation . translate(w，0).step()；那个。setdata({ animationdata :动画。export()})那个。setdata({ tab单击： e . detail。当前})；}}, 总结

以上所述是小编给大家介绍的微信小程序导航栏跟随滑动效果的实现代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！