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


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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
给Javascript数组插入一条记录的代码
Aug 30 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
详解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(三)
2012/03/22 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
javascript动画浅析
2012/08/30 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
python编程开发之日期操作实例分析
2015/11/13 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
Python hashlib模块实例使用详解
2019/12/24 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
C语言面试题
2015/10/30 面试题
数控加工专业毕业生自荐信
2013/09/27 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
网络信息安全承诺书
2014/03/26 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书