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


Posted in Javascript onMay 14, 2019

效果图

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

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

总结 

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

Javascript 相关文章推荐
JS实现控制文本框的内容
Jul 10 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
详解js访问对象的属性和方法
Oct 25 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
vue如何限制只能输入正负数及小数
Jul 04 Javascript
vue实现评论列表功能
Oct 25 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
详解VSCode配置启动Vue项目
May 14 #Javascript
微信小程序下拉菜单效果的实例代码
May 14 #Javascript
jquery+css实现Tab栏切换的代码实例
May 14 #jQuery
jquery实现二级导航下拉菜单效果实例
May 14 #jQuery
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 #Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 #Javascript
vue如何获取自定义元素属性参数值的方法
May 14 #Javascript
You might like
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
js正确获取元素样式详解
2009/08/07 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
对pandas中Series的map函数详解
2018/07/25 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
党员干部公开承诺书
2014/03/26 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
中学教师教学工作总结
2015/08/13 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
pytorch 如何使用float64训练
2021/05/24 Python
python 爬取天气网卫星图片
2021/06/07 Python
浅谈Python数学建模之整数规划
2021/06/23 Python