微信小程序导航栏跟随滑动效果的实现代码
2019-05-15 07:01
921 查看
效果图
.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 }); } },
总结
以上所述是小编给大家介绍的微信小程序导航栏跟随滑动效果的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
您可能感兴趣的文章:
相关文章推荐
- 微信小程序实现卡片左右滑动效果的示例代码
- Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)
- Android实现简单底部导航栏 Android仿微信滑动切换效果
- 微信小程序----导航栏滑动定位(实现CSS3的position:sticky效果)
- 微信小程序实现导航栏选项卡效果
- jQuery实现MSN中文网滑动Tab菜单效果代码
- jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
- TabLayout+TabItem+ViewPager+Fragment实现早期微信屏幕滑动效果
- Android ViewPager和Fragment实现仿微信导航界面及滑动效果
- Android view滑动悬浮固定效果实现代码示例
- jquery跟随屏幕滚动效果的实现代码
- jquery实现最简单的滑动菜单效果代码
- swift实现ios类似微信输入框跟随键盘弹出的效果
- 带滑动条的导航栏(中)---jQuery实现滑动效果
- JS实现的左侧竖向滑动菜单效果代码
- 微信小程序实现移动端滑动分页效果(ajax)
- 一行代码实现去除ListView,RecycleView等可滑动控件的光晕效果
- JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
- 微信小程序顶部导航栏滑动tab效果
- [置顶] 微信小程序实现tabs选项卡效果简单代码实例