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: 20rpx !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: 20rpx;
border-top-right-radius: 20rpx;
width: 100%;
max-height: 200rpx;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.scroll_item image {
width: 100%;
float: left;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
.detailBox {
padding: 30rpx 5% 30rpx 5%;
float: left;
width: 90%;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
background: #fff;
}
.proTitle {
font-size: 36rpx;
color: #666;
line-height: 50rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.proDec {
font-size: 30rpx;
color: #999;
line-height: 50rpx;
}
.proPrice {
font-size: 48rpx;
color: #CA414C;
line-height: 90rpx;
}
.detailLink{
color: #666;
font-size: 30rpx;
}
|
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
});
},
|
