欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

小程序导航栏跟随滑动

程序员文章站 2022-04-11 08:35:11
效果图 .wxml .wxss .js ......

效果图

小程序导航栏跟随滑动

.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
});
}
},