開門見山，先上效果吧！感覺可以的用的上的再往下看。(動圖網(wǎng)址)

　　心動嗎？那就繼續(xù)往下看！

　　先上頁面結(jié)構(gòu)吧，也就是wxml文件，其實可以理解成微信自己封裝過的html，這個不多說了，不懂也沒必要往下看了。

 1  <scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height:{{windowHeight}}px" bindscroll="getSelectItem">
 2     <block wx:for="{{proList}}"  wx:key="unique" wx:for-index="id" wx:for-item="item">
 3       <view class="scroll_item {{item.selected ? 'selected' : ''}}" data-index='{{item.index}}' bindtap='selectProItem'>
 4       <view class='proImg'><image src="{{item.proUrl}}" class="slide-image"  mode="widthFix"/></view>
 5         <view class='detailBox'>
 6             <view class='proTitle'>{{item.proTitle}}</view>
 7             <view class='proDec'>{{item.proDec}}</view>
 8             <view class='proPrice'>￥{{item.proPrice}}</view>
 9             <navigator class='detailLink'  url="../detail/detail?id={{item.id}}">查看詳情 ></navigator>
10         </view>
11       </view>
12     </block>
13   </scroll-view>

　　做該效果樣式就不多說了，一個默認(rèn)狀態(tài)樣式，一個當(dāng)前選中樣式。（開發(fā)小程序的時候，注意class的命名，盡量不要使用層級嵌套，所以class取名的時候要注意唯一性）

• View Code 
  　　

  　　js部分：該效果基于小程序的組件 scroll-view 開發(fā)的，利用bindscroll事件加載回調(diào)函數(shù)。

  　　回調(diào)事件原理：

  　　通過滾動寬度和每個item的寬度從而獲取當(dāng)前滾動的item是第幾位，然后給對應(yīng)的item加上選中class，其他的則去除選中class。

//滑動獲取選中商品
  getSelectItem:function(e){
      var that = this;
      var itemWidth = e.detail.scrollWidth / that.data.proList.length;//每個商品的寬度
      var scrollLeft = e.detail.scrollLeft;//滾動寬度
      var curIndex = Math.round(scrollLeft / itemWidth);//通過Math.round方法對滾動大于一半的位置進(jìn)行進(jìn)位
      for (var i = 0, len = that.data.proList.length; i < len; ++i) {
          that.data.proList[i].selected = false;
      }
      that.data.proList[curIndex].selected = true;
      that.setData({
          proList: that.data.proList,
          giftNo: this.data.proList[curIndex].id
      });
  },

　　ps:有時候一些酷炫的效果其實實現(xiàn)起來非常簡單，建議開發(fā)前先理清實現(xiàn)思路，雖然整個文章言簡意賅，能看懂就自然懂，樂在分享。