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


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 相关文章推荐
input的focus方法使用
Mar 13 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
jQuery实现弹幕特效
Nov 29 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 dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
php简单压缩css样式示例
2016/09/22 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
几款好用的python工具库(小结)
2020/10/20 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
委托书范文
2014/04/02 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
企业愿景口号
2015/12/25 职场文书
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android
python中validators库的使用方法详解
2022/09/23 Python