Vux: tab 组件能否支持 touch 左右滑动的功能

[qiutiaoming]

现在的tab空间只能固定屏幕大小的宽度，希望能够将tab 控件左右滑动的功能，就想 网易新闻客户端的 tab一样。

不知道是否实现起来有难度。
谢谢

[wg5945]

可以配合swiper使用的，sample里面有写

[songhlc]

@qiutiaoming

<tab :line-width=1 active-color='#fc3e31' :index.sync="index">
      <tab-item class="vux-center" :selected="selected === $index" v-for="item in itemlist" @click="selected = $index">{{item}}</tab-item>
    </tab>
    <swiper id="swipecontent" :index.sync="index" :height="0 | fixheight" :show-dots="false">
      <swiper-item>
        <div class="tab-swiper vux-center" >
          <invoicelist :status="billing"></invoicelist>
        </div>
      </swiper-item>
      <swiper-item>
        <div class="tab-swiper vux-center" >
          <invoicelist :status="published"></invoicelist>
        </div>
      </swiper-item>
    </swiper>

不过注意有个坑 swiper 的高度是必须指定的，如果出现纵向滚动条则需要动态计算，另外真机上swiper和纵向滚动条经常容易出现手势冲突，易用性有待提高

[qiutiaoming]

@songhlc ,谢谢，我先试试。

[qiutiaoming]

@songhlc ，可以正常使用，不过如果 tab-item很多，怎么设置可以让tab-item 不挤在一起，可以超出屏幕边界？

[songhlc]

@qiutiaoming 自己去封装一个咯 目前vux给的肯定还是比较基础的一些用法

[airyland]

css就能实现了，没必要上其他组件。

  <div style="width: 100%;overflow:scroll;-webkit-overflow-scrolling:touch;">
      <tab style="width:500px;">
        <tab-item :selected="demo1 === '分类1'" @click="demo1 = '分类1'">已发货</tab-item>
        <tab-item :selected="demo1 === '分类2'" @click="demo1 = '分类2'">未发货</tab-item>
        <tab-item :selected="demo1 === '分类3'" @click="demo1 = '分类3'">全部订单</tab-item>
        <tab-item :selected="demo1 === '分类4'" @click="demo1 = '分类4'">全部订单</tab-item>
        <tab-item :selected="demo1 === '分类5'" @click="demo1 = '分类5'">全部订单</tab-item>
      </tab>
    </div>

[pzPangZhen]

左右滑动的时候怎么能发送请求？