プログラムtabとswiperの結合効果

5707 ワード

アプレット

プロジェクトの中で一つのtab効果に出会い、左右にスライドできる効果をまとめます.

<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,
      });

  },

js正規表現はネットで探しました.