微信小程序滚动Tab选项卡：左右滑动切换、触底加载分页

---

效果图

---

一、顶部标签栏

定位顶部便签栏，使用color-ui的组件样式实现

<scroll-view scroll-x class="bg-white nav my-order_fixed">
      <view class="flex text-center">
            <view 
                    class="cu-item flex-sub {
    {index==TabCur?'text-red cur':''}}" 
                    wx:for="{
    {orderTypes}}" 
                    wx:key="index" 
                    bind:tap="tabSelect" 
                    data-index="{
    {index}}"
            >
                    {
  {item.title}}
            </view>
        </view>
</scroll-view>

👆在横向滑动便签栏<scroll-view>下写页面内容即可，点击事件动态切换便签栏样式，并重置底下数据内容。

👆仅实现了点击便签栏刷新底部内容

---

二、列表内容部分

使用小程序轮播组件<swiper>实现左右滑动切换便签栏功能

重点在于轮播组件包裹下的数据内容结构以及如何赋值要考虑

<swiper 
        class="tab-box" 
        current="{
    {TabCur}}" 
        duration="300" 
        bind:change="switchTab"
>
        <swiper-item 
                class="tab-content" 
                wx:for="{
    {list}}" 
                wx:for-item="orderList" 
                wx:key="index"
         >