小程序选项卡,可左右滑动

本文介绍了一个微信小程序中使用Swiper组件实现的选项卡案例,详细展示了如何通过wxhtml、wxss及js代码实现选项卡切换效果及其高度自适应问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

wxhtml:

<view class="swiper-tab">
  <view class="tab-item swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="clickTab">我要取专票</view>
  <view class="tab-item swiper-tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="clickTab">我的发布</view>
</view>
 
<swiper current="{{currentTab}}" class="swiper" duration="300" bindchange="bindChange"  style="height:{{currentTab==1?Hei+'rpx':'100%'}}">
  <swiper-item>我要取专票内容</swiper-item>
  <swiper-item>我的发布内容</swiper-item>
</swiper>
 
wxss:
 
.swiper-tab {
  width: 100%;
  border-bottom: 2rpx solid #f5f5f5;
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 30rpx;
}

.swiper-tab-item {
  display: inline-block;
  width: 50%;
  color: #999;
}

.tab-item {
  flex: 1;
  font-size: 30rpx;
  display: inline-block;
  color: #777;
}

.on {
  color: #4ca835;
  border-bottom: 4rpx solid #4ca835;
}

.swiper {
  display: block;
  height: 100%;
  width: 100%;
}
 
js:
 
data: {
  Hei:"",
  currentTab: 0,
}
 
//滑动切换选项卡
bindChange: function (e) {
  var that = this;
  that.setData({ currentTab: e.detail.current });
},
// 点击切换选项卡
clickTab: function (e) {
  var that = this;
  if (this.data.currentTab === e.target.dataset.current) {
    return false;
  }
   else {
    that.setData({
      currentTab: e.target.dataset.current
    })
  }
},
 
 
 
 
 
 注:
 
  1.swiper这种选项卡高度不自适应,不适合做有列表展示的,比较麻烦;高度=每一条数据高度*数据条数
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

转载于:https://www.cnblogs.com/HONGYE1994/p/8058743.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值