微信小程序实现tab和swiper切换结合效果
程序员文章站
2022-03-20 21:52:04
本文实例为大家分享了小程序实现tab和swiper切换效果展示的具体代码,供大家参考,具体内容如下
先上效果图:
实现代码如下:
wxml页面...
本文实例为大家分享了小程序实现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 }); } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Open3d学习计划——5(变换)
下一篇: 微信小程序支付及退款流程详解