廢話不多說，直接上圖吧！我的目的是想要達到滑鼠點選每項時，滑塊會自動滑動，具體可開啟微信流量充值體驗體驗。但是小程式scroll-view元件並不能達到這個效果，必須手動拖動，才能滑動，網上找了許久沒有找到相關的程式碼片段，最終發現zanUI有這個元件，參照這個元件的tab元件來完成的。zanUIGitHub地址，至於zanUI的使用，請看我【zanUI的使用】一文。

具體程式碼參考如下：

.wxml程式碼如下：

<view class="title">特惠流量月包</view>
        <view class="scroll-box">
            <scroll-view class="coupon-scroll-view_x" scroll-x="true" scroll-with-animation="true" bindscrolltoupper="toUpper" bindscrolltolower="toLower"  id="scroll-view" scroll-left="{{ scrollLeft }}">
                <view class="flow-items {{ item.isSelected ? 'flow-items-selected':'' }}" wx:for="{{ couponData }}" wx:key="{{ item.id}}" bindtap="onCouponItemClick" id="item-{{ item.id }}" data-item="{{ item }}">
                    <block wx:if="{{ item.id == '1' }}">
                        <view class="flow-item">
                            <view class="item-title {{ item.isSelected ? 'selected-color':'' }}">{{ item.itemTitle }}</view>
                            <view class="first-item-text {{ item.isSelected ? 'selected-color':'' }}">為你推薦</view>
                            <view class="item-price {{ item.isSelected ? 'selected-color':'' }}">{{ item.itemPrice}}</view>
                        </view>
                    </block>
                    <block wx:else>
                        <view class="flow-item">
                            <view class="item-title {{ item.isSelected ? 'selected-color':'' }}">{{ item.itemTitle }}</view>
                            <view class="item-price {{ item.isSelected ? 'selected-color':'' }}">{{ item.itemPrice}}</view>
                        </view>
                    </block>
                </view>
            </scroll-view>
        </view>
 

wxss檔案如下：

.scroll-box .coupon-scroll-view_x{
    width: 100%;
    height: 140rpx;
    margin-top: 20rpx;
    white-space: nowrap;
    overflow: hidden;
    box-sizing:border-box;
}
.flow-items{
    width: 166rpx;
    height: 128rpx;
    border-bottom: 8rpx solid #F7F7F7;
    box-sizing:border-box;
    display: inline-block;
    /*text-align: center;*/
    position:relative;
}
.flow-item{
    width: 110rpx;
    height: 102rpx;
    position: absolute;
    /*border: #0C0C0C 1rpx solid;*/
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
}


.flow-items::after {
  content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border-right:0 solid #E2E2E2;border-width:1px;
    
}

.flow-items-selected{
    border-bottom: 8rpx solid #2DAF73;
    box-sizing:border-box;
    color: #2DAF73;
}

/**
去除橫向滾動條
*/
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.item-title{
    font-size: 44rpx;
    height:48rpx;
    line-height:48rpx;
    color: #0a0a0a;
}

.first-item-text{
    font-size: 18rpx;
    height:24rpx;
    line-height:24rpx;
    color: red;
}

.item-price{
    font-size: 30rpx;
    height:32rpx;
    line-height:32rpx;
    color: #6C6C6C;
}
.selected-color{
    color: #2DAF73;
}
 

js程式碼如下：

 /**
   * 頁面的初始資料
   */
  data: {
      phoneData:{phone:"", phoneIsp:""},
      couponData:[{id:"1",itemTitle:"1G",itemPrice:"15.00元",isSelected:true},{id:"2",itemTitle:"2G",itemPrice:"26.00元",isSelected:false},
          {id:"3",itemTitle:"3G",itemPrice:"29.00元",isSelected:false},{id:"4",itemTitle:"4G",itemPrice:"35.00元",isSelected:false},{id:"5",itemTitle:"200M",itemPrice:"10.00元",isSelected:false},
          {id:"6",itemTitle:"500M",itemPrice:"18.00元",isSelected:false}],
      scrollLeft:0
  },

 /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    console.log("onLoad:",options)
      let phone = "phoneData.phone";//獲取上個頁面的電話號碼
      let phoneIsp = "phoneData.phoneIsp";//獲取上個頁面的歸屬地
      if (options.phone){
          this.setData({
              [phone]:options.phone,
              [phoneIsp]:options.phoneIsp
          })
      }

  },

/**
  * 動態改變scroll-left的值
  * */
  _handleScroll(selectedId){
        var _this = this;
        var query = wx.createSelectorQuery();//建立節點查詢器
        query.select('#item-' + selectedId).boundingClientRect();//選擇id='#item-' + selectedId的節點，獲取節點位置資訊的查詢請求
        query.select('#scroll-view').boundingClientRect();//獲取滑塊的位置資訊
        //獲取滾動位置
        query.select('#scroll-view').scrollOffset();//獲取頁面滑動位置的查詢請求
        query.exec(function (res) {
            // console.log("res:",res)
            _this.setData({
                scrollLeft: res[2].scrollLeft + res[0].left + res[0].width / 2 - res[1].width / 2
            });
        });
   },

onCouponItemClick:function (e) {
      console.log("onCouponItemClick:",e)
      var id = e.currentTarget.dataset.item.id;
      var curIndex = 0;
      for(var i = 0;i < this.data.couponData.length ;i++){
          if( id == this.data.couponData[i].id){
            this.data.couponData[i].isSelected = true;
            curIndex = i;
          } else {
            this.data.couponData[i].isSelected = false;
          }
      }
      this._handleScroll(id);
    this.setData({
        couponData:this.data.couponData
    })
  },
 

各位看官覺得有用嗎？有用就給個讚唄！