小程序模板网

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

2018-05-05 多田翁

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

  心动吗?那就继续往下看!

  先上页面结构吧,也就是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 <block wx:for="{{proList}}" wx:key="unique" wx:for-index="id" wx:for-item="item">
  3. 3 <view class="scroll_item {{item.selected ? 'selected' : ''}}" data-index='{{item.index}}' bindtap='selectProItem'>
  4. 4 <view class='proImg'><image src="{{item.proUrl}}" class="slide-image" mode="widthFix"/></view>
  5. 5 <view class='detailBox'>
  6. 6 <view class='proTitle'>{{item.proTitle}}</view>
  7. 7 <view class='proDec'>{{item.proDec}}</view>
  8. 8 <view class='proPrice'>¥{{item.proPrice}}</view>
  9. 9 <navigator class='detailLink' url="../detail/detail?id={{item.id}}">查看详情 ></navigator>
  10. 10 </view>
  11. 11 </view>
  12. 12 </block>
  13. 13 </scroll-view>

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

  • View Code    

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

      回调事件原理:

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

 

				
  1. //滑动获取选中商品
  2. getSelectItem:function(e){
  3. var that = this;
  4. var itemWidth = e.detail.scrollWidth / that.data.proList.length;//每个商品的宽度
  5. var scrollLeft = e.detail.scrollLeft;//滚动宽度
  6. var curIndex = Math.round(scrollLeft / itemWidth);//通过Math.round方法对滚动大于一半的位置进行进位
  7. for (var i = 0, len = that.data.proList.length; i < len; ++i) {
  8. that.data.proList[i].selected = false;
  9. }
  10. that.data.proList[curIndex].selected = true;
  11. that.setData({
  12. proList: that.data.proList,
  13. giftNo: this.data.proList[curIndex].id
  14. });
  15. },

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



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24251.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询