好久沒跟新博客了 今天沒啥事來記錄一下我的成果 哈哈哈
今天產品小姐姐過來跟我說改一下產品活動頁的樣式 我看了一眼發現有個輪播樣式兩邊小中間大 這個我以前是沒有寫過的 而且在小程序中要實現 覺得應該不是很簡單 想著記錄一下吧 其實沒我想的那么難實現
小程序有個組件輪播組件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組件還是挺簡單實現的 沒有剛開始想的那么難
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
