小程序 tab和swiper的结合效果

来源：互联网发布：mac画图板编辑：程序博客网时间：2024/05/23 15:07

项目中遇到一个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,      });  },

阅读全文

0 0