仿淘宝手机移动滑块

---

<!-- 滑动盒子 -->

  <view class='changeBox'>

    <scroll-view scroll-x class='scrollBox' bindscroll='scroll'>

      <view class='scrollItem' wx:for='{{scrollData}}' wx:key='{{index}}' data-index='{{index}}' bindtap='changeScroll'>

        <view class='topBox {{index == scrollInd?"hoverBox":""}} flex-col-center'>

          <view class='sTitle {{index==scrollInd?"selectTitle":""}}'>{{item.title}}</view>

          <image class='scrollIcon' src='{{item.icon}}'></image>

          <view class='sNum'>{{item.num}}<span>{{item.unit}}</span></view>

          <view class='sType'>{{item.type}}</view>

        </view>

      </view>

    </scroll-view>

    <view class='scrollBar'>

      <view class='bar' style='left:{{offSet}}%;'></view>

    </view>

  </view>

// 同步滚动距离到进度条

  scroll: function (e) {

    var that = this;

    var allOffset = 108;//总体宽度

    var totalWidth = e.detail.scrollLeft;//获取滑动的位置

    var offset = totalWidth / allOffset * (58)//用滑动位置除总体宽度得到偏移位置在乘于滑动模块在总体的自身宽度得到滑动的移动的位置

    console.log(totalWidth)

    that.setData({

      offSet: offset,

    })

  },