https://www.cnblogs.com/gaofengming/p/8391783.html
开门见山,先上效果吧!感觉可以的用的上的再往下看。
心动吗?那就继续往下看!
先上页面结构吧,也就是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>
做该效果样式就不多说了,一个默认状态样式,一个当前选中样式。(开发小程序的时候,注意class的命名,尽量不要使用层级嵌套,所以class取名的时候要注意唯一性)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | .scroll-view_H{ width : 100% ; text-align : center ; white-space : nowrap ; } .scroll_item { position : relative ; width : 84% ; margin : 0 1% ; left : -2% ; display : inline- block ; border-radius: 20 rpx !important ; overflow : hidden ; transform: scale( 0.9 ); box-shadow: 0 0 10px #ccc ; vertical-align : top ; top : 5% ; height : 72% ; background-color : #fff ; } .scroll_item:first-child{ margin-left : 8% ; left : 0 ; } .scroll_item:last-child{ margin-right : 8% ; left : 0 ; } .scroll_item.selected{ transform: scale( 1 ); border : solid 1px #ffcd54 ; } .scroll_item .proImg{ border-top-left-radius: 20 rpx; border-top-right-radius: 20 rpx; width : 100% ; max-height : 200 rpx; position : absolute ; top : 0 ; left : 0 ; z-index : 0 ; } .scroll_item image { width : 100% ; float : left ; border-top-left-radius: 20 rpx; border-top-right-radius: 20 rpx; } .detailBox { padding : 30 rpx 5% 30 rpx 5% ; float : left ; width : 90% ; border-bottom-left-radius: 20 rpx; border-bottom-right-radius: 20 rpx; position : absolute ; bottom : 0 ; left : 0 ; z-index : 1 ; background : #fff ; } .proTitle { font-size : 36 rpx; color : #666 ; line-height : 50 rpx; overflow : hidden ; text- overflow : ellipsis; white-space : nowrap ; } .proDec { font-size : 30 rpx; color : #999 ; line-height : 50 rpx; } .proPrice { font-size : 48 rpx; color : #CA414C ; line-height : 90 rpx; } .detailLink{ color : #666 ; font-size : 30 rpx; } |
js部分:该效果基于小程序的组件 scroll-view 开发的,利用bindscroll事件加载回调函数。
回调事件原理:
通过滚动宽度和每个item的宽度从而获取当前滚动的item是第几位,然后给对应的item加上选中class,其他的则去除选中class。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //滑动获取选中商品 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方法对滚动大于一半的位置进行进位 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 }); }, |