開門見山,先上效果吧!感覺可以的用的上的再往下看。(動(dòng)圖網(wǎng)址)
心動(dòng)嗎?那就繼續(xù)往下看!
先上頁(yè)面結(jié)構(gòu)吧,也就是wxml文件,其實(shí)可以理解成微信自己封裝過(guò)的html,這個(gè)不多說(shuō)了,不懂也沒必要往下看了。
-
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>
做該效果樣式就不多說(shuō)了,一個(gè)默認(rèn)狀態(tài)樣式,一個(gè)當(dāng)前選中樣式。(開發(fā)小程序的時(shí)候,注意class的命名,盡量不要使用層級(jí)嵌套,所以class取名的時(shí)候要注意唯一性)
-
//滑動(dòng)獲取選中商品
-
getSelectItem:function(e){
-
var that = this;
-
var itemWidth = e.detail.scrollWidth / that.data.proList.length;//每個(gè)商品的寬度
-
var scrollLeft = e.detail.scrollLeft;//滾動(dòng)寬度
-
var curIndex = Math.round(scrollLeft / itemWidth);//通過(guò)Math.round方法對(duì)滾動(dòng)大于一半的位置進(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:有時(shí)候一些酷炫的效果其實(shí)實(shí)現(xiàn)起來(lái)非常簡(jiǎn)單,建議開發(fā)前先理清實(shí)現(xiàn)思路,雖然整個(gè)文章言簡(jiǎn)意賅,能看懂就自然懂,樂(lè)在分享。
|