微信小程序导航栏跟随滑动效果的实现代码-成都快上网建站

微信小程序导航栏跟随滑动效果的实现代码

效果图

成都创新互联专注于宁国企业网站建设,成都响应式网站建设,商城网站制作。宁国网站建设公司,为宁国等地区提供建站服务。全流程按需网站开发,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务

微信小程序导航栏跟随滑动效果的实现代码

.wxml


tab1
tab2 
tab3 

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

总结 

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


网页标题:微信小程序导航栏跟随滑动效果的实现代码
分享链接:http://kswjz.com/article/iiidis.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流