• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序-tab切换

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

//wxml

<view class="wrap">
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">可用码</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">已使用</view>
</view>
 
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight-36}}px" bindchange="bindChange">
<!-- 简介 -->
<swiper-item>
<scroll-view class="intro_main" style="height:{{winHeight-36}}px" scroll-y="true">
<view class="vipList">
<view class="vipListBar" wx:for="{{11}}">
<view class="vipListBarBox">
<view class="vipListBarBoxLeft">VIP服务码</view>
<view class="vipListBarBoxRight">VMI9E3L3G9</view>
</view>
<view class="vipListBarText">复制使用</view>
</view>
</view>
</scroll-view>
</swiper-item>
<!-- 目录 -->
<swiper-item>
<scroll-view class="Catalog" style="height:{{winHeight-36}}px" scroll-y="true">
<view class="vipList">
<view class="vipListBar" wx:for="{{9}}">
<view class="vipListBarBox">
<view class="vipListBarBoxLeft leftActive">VIP服务码</view>
<view class="vipListBarBoxRight RightActive">VMI9E3L3G9</view>
</view>
<view class="vipListBarText active">已失效</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
 
.swiper-tab{
width: 100%;
border-bottom: 1rpx solid #e6e6e6;
text-align: center;
line-height: 68rpx;
box-sizing: border-box;
display: flex;
justify-content: space-around;
}
.swiper-tab-list{
font-size: 30rpx;
width:100rpx;
color: #999999;
font-weight: bold;
 
}
.on{
color: #333333;
border-bottom: 4rpx solid #da7c0c;
}
.swiper-box{ display: block; width: 100%; overflow: hidden; margin-bottom: 100rpx;}
 
data: {
winWidth: 0,
winHeight: 0,
// tab切换
currentTab: 0,
},
// 滑动切换tab
bindChange: function (e) {
var that = this;
that.setData({ currentTab: e.detail.current });
},
/**
* 点击tab切换
*/
swichNav: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
},
onLoad: function (options) {
var that= this;
wx.getSystemInfo({
success: function (res) {
that.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}
})
},

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序多视频播放,避免同时播放发布时间:2022-07-18
下一篇:
百新谷网络--微信小程序商城发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap