微信小程序左右滑動切換圖片酷炫效果(附效果)
阿新 • • 發佈:2018-01-31
bin select ans for image pac psi border als
開門見山,先上效果吧!感覺可以的用的上的再往下看。
心動嗎?那就繼續往下看!
先上頁面結構吧,也就是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取名的時候要註意唯一性)
.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。
//滑動獲取選中商品 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 }); },
ps:有時候一些酷炫的效果其實實現起來非常簡單,建議開發前先理清實現思路,雖然整個文章言簡意賅,能看懂就自然懂,樂在分享。
微信小程序左右滑動切換圖片酷炫效果(附效果)