小程序 tab和swiper的结合效果

最新推荐文章于 2022-01-19 17:10:25 发布

rainbow8590

最新推荐文章于 2022-01-19 17:10:25 发布

阅读量999

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/rainbow8590/article/details/78792162

版权

小程序专栏收录该内容

14 篇文章 1 订阅

订阅专栏

项目中遇到一个tab效果,并且能左右滑动的效果.总结一下:
html:

<view class="tab" style="height:{{heigh}}px">
      <view class="tabTitle">
        <scroll-view>
          <view id="0" class="{{activeIndex == 0 ?'titleActive':''}} titleItem" bindtap="tabClick" >
            我的任务
            <view class="arrow" wx:if="{{showArrow}}"></view>
          </view>
          <view id="1" class="{{activeIndex == 1 ?'titleActive':''}} titleItem" bindtap="tabClick">
            我的智库
            <view class="arrow" wx:if="{{!showArrow}}"></view>
          </view>
        </scroll-view>
      </view>
      <view class="tabBody" >
        <view class="tabBodyWrap" >
            <swiper current="{{activeIndex}}" duration="500" bindchange="swiperChange" ">
              <swiper-item>
                  任务项目
              </swiper-item>
              <swiper-item>
                  智库项目
              </swiper-item>
            </swiper>
        </view>
      </view>
    </view>

js:

tabClick:function(e){
    var that = this;
    var idIndex = e.currentTarget.id;
    this.setData({
      activeIndex:idIndex,
    });
  },
   swiperChange:function(e){
      var current = e.detail.current;
      this.setData({
        activeIndex:current,
      });

  },