微信小程序左右滑动切换图片酷炫效果（附效果）

时间：2024-05-19 15:23:47

开门见山，先上效果吧！感觉可以的用的上的再往下看。(动图网址)

微信小程序左右滑动切换图片酷炫效果（附效果）

　　心动吗？那就继续往下看！

　　先上页面结构吧，也就是wxml文件，其实可以理解成微信自己封装过的html，这个不多说了，不懂也没必要往下看了。



    

  1.  1 <scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height:{{windowHeight}}px" bindscroll="getSelectItem">
    2. 

  2.  2 <block wx:for="{{proList}}" wx:key="unique" wx:for-index="id" wx:for-item="item">
    3. 

  3.  3 <view class="scroll_item {{item.selected ? 'selected' : ''}}" data-index='{{item.index}}' bindtap='selectProItem'>
    4. 

  4.  4 <view class='proImg'><image src="{{item.proUrl}}" class="slide-image" mode="widthFix"/></view>
    5. 

  5.  5 <view class='detailBox'>
    6. 

  6.  6 <view class='proTitle'>{{item.proTitle}}</view>
    7. 

  7.  7 <view class='proDec'>{{item.proDec}}</view>
    8. 

  8.  8 <view class='proPrice'>￥{{item.proPrice}}</view>
    9. 

  9.  9 <navigator class='detailLink' url="../detail/detail?id={{item.id}}">查看详情 ></navigator>
    10. 

  10. 10 </view>
    11. 

  11. 11 </view>
    12. 

  12. 12 </block>
    13. 

  13. 13 </scroll-view>
    14. 




　　做该效果样式就不多说了，一个默认状态样式，一个当前选中样式。（开发小程序的时候，注意class的命名，尽量不要使用层级嵌套，所以class取名的时候要注意唯一性）


  • 

    View Code 
    
　　
    

    　　js部分：该效果基于小程序的组件 scroll-view 开发的，利用bindscroll事件加载回调函数。
    

    　　回调事件原理：
    

    　　通过滚动宽度和每个item的宽度从而获取当前滚动的item是第几位，然后给对应的item加上选中class，其他的则去除选中class。
    









    

  1. //滑动获取选中商品
    2. 

  2.  getSelectItem:function(e){
    3. 

  3.  var that = this;
    4. 

  4.  var itemWidth = e.detail.scrollWidth / that.data.proList.length;//每个商品的宽度
    5. 

  5.  var scrollLeft = e.detail.scrollLeft;//滚动宽度
    6. 

  6.  var curIndex = Math.round(scrollLeft / itemWidth);//通过Math.round方法对滚动大于一半的位置进行进位
    7. 

  7.  for (var i = 0, len = that.data.proList.length; i < len; ++i) {
    8. 

  8.  that.data.proList[i].selected = false;
    9. 

  9.  }
    10. 

  10.  that.data.proList[curIndex].selected = true;
    11. 

  11.  that.setData({
    12. 

  12.  proList: that.data.proList,
    13. 

  13.  giftNo: this.data.proList[curIndex].id
    14. 

  14.  });
    15. 

  15.  },
    16. 




　　ps:有时候一些酷炫的效果其实实现起来非常简单，建议开发前先理清实现思路，虽然整个文章言简意赅，能看懂就自然懂，乐在分享。



相关文章