微信小程式實現兩邊小中間大的輪播效果
阿新 • • 發佈:2019-02-10
好久沒跟新部落格了 今天沒啥事來記錄一下我的成果 哈哈哈
今天產品小姐姐過來跟我說改一下產品活動頁的樣式 我看了一眼發現有個輪播樣式兩邊小中間大 這個我以前是沒有寫過的 而且在小程式中要實現 覺得應該不是很簡單 想著記錄一下吧 其實沒我想的那麼難實現
小程式有個元件輪播元件swiper 這個就可以直接使用 而且他提供了兩個屬性很實用
這個可以幫助實現出現兩邊部分圖片資訊的功能
我主要的想法就是給個標識 當滑動到某個圖片時讓他的樣式處於大圖狀態 他的上一張是縮小並出現左邊部分 下一張縮小出現右邊部分 所以我講迴圈的圖片資料改為了這樣
imgUrls: [ { url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', isChange:1, }, { url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', isChange: 2, }, { url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg', isChange: 3, }, ],
欄位isChange是用來判斷圖片樣式的
頁面程式碼
<swiper indicator-dots="{{false}}" autoplay="{{false}}" previous-margin='80rpx' next-margin='80rpx' bindchange='swiperChange'> <block wx:for="{{imgUrls}}" wx:for-item='item' wx:key=''> <swiper-item> <view class="shuffing-item {{item.isChange==2?'shuffing-item-next':item.isChange==0?'shuffing-item-preo':''}}"> <image src="{{item.url}}"></image> <view class='shuffing-mask'> <text>開啟不老童話</text> <text>></text> </view> </view> </swiper-item> </block> </swiper>
樣式程式碼
swiper{ height:520rpx; margin:20rpx 30rpx; } .shuffing{ text-align: center; width:100%; position: relative; } .shuffing-item{ position: absolute; width:100%; left:50%; top:50%; transform: translateX(-50%) translateY(-50%); height:520rpx; transition: all 0.3s; } .shuffing-item-next{ width:85%; height:85%; transform:translateX(-100%) translateY(-50%); transition: all 0.3s; } .shuffing-item-preo{ width:85%; height:85%; transform:translateX(40%) translateY(-50%); transition: all 0.3s; } .shuffing-item>image{ width:100%; height:100%; } .shuffing-mask{ position: absolute; bottom: 0; width:100%; line-height: 60rpx; background: rgba(0,0,0,0.6); color:#fff; display: flex; justify-content: space-between; padding:0 20rpx; }
感覺小程式有個swiper元件還是挺簡單實現的 沒有剛開始想的那麼難