微信小程序导航栏跟随滑动效果的实现代码
程序员文章站
2022-10-14 14:39:39
效果图
.wxml
.wxml
<view class='tabbar'> <view class='tabitem wx:if="{{tabclick===0?"click":""}}"' bindtap='clicktab' data-index='0'>tab1</view> <view class='tabitem wx:if="{{tabclick===1?"click":""}}"' bindtap='clicktab' data-index='1'>tab2 </view> <view class='tabitem wx:if="{{tabclick===2?"click":""}}"' bindtap='clicktab' data-index='2'>tab3 </view> <view class='underline' animation="{{animationdata}}" style='left:{{isleft}}'></view> </view>
.wxss
.tabbar{ height: 80rpx; background-color:#50b7ea; width: 100%; font-size: 28rpx; color: rgba(255,255,255,0.50); position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 997; } .tabitem{ width: 33.333%; display: flex; align-content: center; justify-content: center; position: relative; height: 100%; font-size: 28rpx; } .click{ color: white; } .underline{ position: absolute; content: ''; width: 84rpx; height: 3px; background-color:white; bottom: 0; }
.js
data:{ tabclick: 0, animationdata: {}, isleft: '12%' }, swipertab: function (e) { var that = this; var index = e.detail.current console.log(e.detail.current) var animation = wx.createanimation({ duration: 1000, timingfunction: "ease", }) this.animation = animation if (index === 0) { animation.translate(0, 0).step(); that.setdata({ animationdata: animation.export() }) that.setdata({ tabclick: e.detail.current }); } else if (index === 1) { var w = wx.getsysteminfosync().windowwidth; w = w * 0.32 animation.translate(w, 0).step(); that.setdata({ animationdata: animation.export() }) that.setdata({ tabclick: e.detail.current }); } else if(index === 2){ var w = wx.getsysteminfosync().windowwidth; w = w * 0.65 animation.translate(w, 0).step(); that.setdata({ animationdata: animation.export() }) that.setdata({ tabclick: e.detail.current }); } },
总结
以上所述是小编给大家介绍的微信小程序导航栏跟随滑动效果的实现代码,希望对大家有所帮助