本文实例为大家分享了小程序实现tab和swiper切换效果展示的具体代码,供大家参考,具体内容如下
先上效果图:
实现代码如下:
wxml页面
<scroll-view scroll-x=true class=weui-navbar> <block wx:for-items={{tabs}}> <view id={{index}} class={{activeIndex == index ?'item_on':''}} default-item bindtap=tabClick style=width:{{tabW}}px> {{item}} </view> </block> <view class=weui-navbar-slider style=transform:translateX({{slideOffset}}px);></view> </scroll-view> <view class=rec /> <swiper current={{activeIndex}} class=swiper-box duration=100 bindchange=bindChange> <swiper-item class=swiper-item> <view class=slide-view>tab0</view> </swiper-item> <swiper-item class=swiper-item> <view class=slide-view>tab1</view> </swiper-item> <swiper-item class=swiper-item> <view class=slide-view>tab2</view> </swiper-item> <swiper-item class=swiper-item> <view class=slide-view>tab3</view> </swiper-item> <swiper-item class=swiper-item> <view class=slide-view>tab4</view> </swiper-item> <swiper-item class=swiper-item> <view class=slide-view>tab5</view> </swiper-item> <swiper-item class=swiper-item> <view class=slide-view>tab6</view> </swiper-item> </swiper>
wxss样式:
page { height: 100%; } view , scroll-view{ padding: 0px; margin: 0px; } .weui-navbar{ width: 100%; position: fixed; border-bottom: 1px solid #00bba1; box-sizing: border-box; white-space: nowrap; z-index: 100; background: white; } .rec{ width: 100%; height: 7%; } .weui-navbar .default-item{ /*width:25%;*/ display: inline-block; text-align: center; font-size: 32rpx; box-sizing: border-box; height: 7%; padding-bottom: 20rpx; } .weui-navbar .item_on{ color: #00bba1; } .weui-navbar-slider{ position: absolute; width: 160rpx; height: 2px; content:; background: #00bba1; bottom: 0px; left: 12.5rpx; transition: transform .3s; } .swiper-box{ height: 900px; border-bottom: 1px solid #d1d1d1; } .swiper-box .swiper-item{ text-align: center; padding-top: 200rpx; height: 100%; }
js代码:
//index.js //获取应用实例 var app = getApp(); var mtabW; Page({ data: { tabs:[综合与绘画,艺术喷漆,泥塑,纸面绘画,布面绘画,中国油画,水墨画], activeIndex:0, slideOffset:0, tabW:0 }, //事件处理函数 onLoad: function () { var that = this; wx.getSystemInfo({ success: function (res) { mtabW = res.windowWidth / 4; //设置tab的宽度 that.setData({ tabW:mtabW }) } }); }, bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, tabClick:function(e){ var that = this; var idIndex = e.currentTarget.id; var offsetW = e.currentTarget.offsetLeft; //2种方法获取距离文档左边有多少距离 this.setData({ activeIndex:idIndex, slideOffset:offsetW }); }, bindChange:function(e){ var current = e.detail.current; if((current+1)%4 == 0){ } var offsetW = current * mtabW; //2种方法获取距离文档左边有多少距离 this.setData({ activeIndex:current, slideOffset:offsetW }); } })
相关推荐:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。