微信小程序实现滑动监听及tab切换

最新推荐文章于 2024-05-23 10:10:17 发布

进阶的巨人001

最新推荐文章于 2024-05-23 10:10:17 发布

阅读量1.1k

点赞数 2

文章标签：小程序

本文链接：https://blog.csdn.net/weixin_45389051/article/details/104718887

版权

一.html

      <view class="tab">
<view class="tab-item {{tab ==0 ?'active':''}}" bindtap="changeItem" data-item="0">大娃</view>
<view class="tab-item {{tab ==1 ?'active':''}}" bindtap="changeItem" data-item="1">二娃</view>
<view class="tab-item {{tab ==2 ?'active':''}}" bindtap="changeItem" data-item="2">三娃</view>
</view>

   <view class="content">
<swiper current="{{item}}" bindchange="changeTab">
<swiper-item>a</swiper-item>
<swiper-item>b</swiper-item>
<swiper-item>c</swiper-item>
</swiper>
</view>

二.css

    page{
  display: flex;
  flex-direction: column;
  background: #17181a;
  color: #ccc;
  height: 100%
}
.tab{
  display: flex
}
.tab-item{
  flex: 1;
  text-align: center;
  font-size: 30rpx;
  line-height: 72rpx;
  border-bottom: 6rpx solid #eee;
}
.content{
  flex: 1
}
.content>swiper{
  height: 100%
}
.tab-item.active{
  color: #c25b5b;
  border-bottom-color: #c25b5b;
}

三.js

	  data: {
	      item:0,
	      tab:0,}
	
	   changeItem(e){
	    this.setData({
	      item:e.target.dataset.item
	    })
	  },
	  changeTab(e){
	    this.setData({
	      tab:e.detail.current
	    })
	  },