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


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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
用JS写一个发布订阅模式
Nov 07 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
农民C键的运用技巧
2020/03/04 星际争霸
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
对于Python中线程问题的简单讲解
2015/04/03 Python
Python字典操作简明总结
2015/04/13 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
《黄河颂》教学反思
2014/02/07 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
优秀护士事迹材料
2014/12/25 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android