小程序模板網

用小程序原生的swiper,實現(xiàn)酷炫banner(基于mpvue)

發(fā)布時間:2018-09-19 08:55 所屬欄目:小程序開發(fā)教程

前些日子老板大人又安排了新的任務——banner的開發(fā),拿到設計妹子給的設計圖之后,我的第一感覺就是——呵!看起來不難嘛!不就是用touchStart,touchmove,touchend組合+一些transition效果+一些位置計算就能實現(xiàn)了嗎???看我兩天內不用輪子直接手寫一個實現(xiàn)它!

。

。

一天半后

。

。

在嘗試了wx.createAnimation()中的translateX/left+原生的css3的transition之后,我拿起了鏡子,摸了摸被自己打腫的臉,心里滿是委屈:這特喵的效果怎么都不按照預想的來??!是我的寫法不對還是因為mpvue各種坑使???我開始深深滴懷疑自己。。。在基本確定此路不通之后(后來了解到其實應該是mpvue數(shù)據更新機制的問題,每次修改一個data()里面的值,都會刷新其他的值,不信你可以在mpvue中去試試用scroll-view組件的scroll-top屬性實現(xiàn)返回頂部試試。。。),我打開了技術群,拋出了問題,然后有人指出其實用小程序的swiper應該也可以實現(xiàn)的,這個想法我之前在某一瞬間曾經有過——swiper設置好基礎參數(shù),然后額外加一些樣式,應該可以實現(xiàn)。這位仁兄的思路和我不謀而合(咳咳咳,我先不要臉,你們隨意),我也重拾信心,下面呢,就是具體的實現(xiàn)方法以及效果了:

1.先看下效果吧

動圖我并不會做,就放一張截圖吧,想看具體的效果的小伙伴們可以去我 github的項目:mpvue-banner 上下載并且跑起來看一下(我是真的不知道怎么在MacBook上制作gif,如果有哪位小伙伴知道,可以在評論里告知,感謝感謝!),如果這個banner不是你想要的效果,您可以選擇不再往下看,或者可以看看實現(xiàn)的思路~下面先看下圖片吧

banner就在上圖中紅色框內,可以看到此款banner并沒有像大多數(shù)banner一樣占據整個屏幕的寬度,而是前后的banner圖都露出了一部分,而且展示的banner圖比前后的banner圖片大小上還放大了一定的倍數(shù),這樣看下來是不是覺得整體設計上要比默認的banner效果好了不少呢?如果還有興趣的話,請繼續(xù)往下看具體的實現(xiàn)思路以及代碼

2.看完了效果,我們再來看下mpvue的swiper組件吧

mpvue的該組件也是基于小程序原生的swiper組件實現(xiàn)的,具體的屬性我就不再挨個介紹了,畢竟官方文檔里寫的很清楚了~這里就主要說下我們要實現(xiàn)上圖中的banner要依賴的最重要的兩個屬性previous-margin和next-margin,前者主要作用是「露出前一項的一小部分」,后者主要作用是「露出后一項的一小部分」,好了,我們先把mpvue-swiper組件介紹中的代碼copy 過來:

<template>
  <div class="page">
    <view class="page__hd">
      <view class="page__title">Swiper</view>
      <view class="page__desc">滑塊視圖容器,這里采用小程序原生 swiper 組件實現(xiàn)。</view>
    </view>
    <div class="page__bd page__bd_spacing">
      <swiper :indicator-dots="indicatorDots" 
        :autoplay="autoplay" 
        :interval="interval" 
        :duration="duration" 
        :circular="circular" 
        @change="swiperChange" 
        @animationfinish="animationfinish">
        <div v-for="item in imgUrls" :key="index">
          <swiper-item>
            <image :src="item" class="slide-image" />
          </swiper-item>
        </div>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 900,
      circular: true,
      imgUrls: [
        'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
      ]
    }
  },
  methods: {
    swiperChange(e) {
      console.log('第' + e.mp.detail.current + '張輪播圖發(fā)生了滑動');
    },
    animationfinish(e) {
      console.log('第' + e.mp.detail.current + '張輪播圖滑動結束');
    }
  }
}
</script>
<style>
.slide-image {
  width: 100%;
  height: 100%;
}
</style>
復制代碼

粘完這些代碼,你能實現(xiàn)一個很常規(guī)的banner了,然后我們加上剛剛我們提到的那兩個屬性:

<swiper :indicator-dots="indicatorDots" 
        :autoplay="autoplay" 
        :interval="interval" 
        :duration="duration" 
        :circular="circular" 
        :previous-margin="'60rpx'"
        :next-margin="'60rpx'"
        @change="swiperChange" 
        @animationfinish="animationfinish">
        <div v-for="item in imgUrls" :key="index">
          <swiper-item>
            <div class="img-wrapper">
                <image :src="item" class="slide-image" />
            </div>
          </swiper-item>
        </div>
    </swiper>
復制代碼

這時候你就實現(xiàn)了一個能將前一項和后一項各露出60rpx的banner了,只不過此時各項的圖片大小都是相同的,那怎么實現(xiàn)主項的圖片大小的放大呢,當然是使用css的transform給圖片標簽加各放大的樣式,且往下看代碼:

<swiper :indicator-dots="indicatorDots" 
        :autoplay="autoplay" 
        :interval="interval" 
        :duration="duration" 
        :circular="circular" 
        :previous-margin="'60rpx'"
        :next-margin="'60rpx'"
        @change="swiperChange" 
        @animationfinish="animationfinish">
        <div v-for="item in imgUrls" :key="index">
          <swiper-item>
            <div class="img-wrapper"
                :style="{
                    boxSizing: 'border-box', 
                    width: '100%', 
                    height: '100%', 
                    display: 'flex', 
                    justifyContent: 動態(tài)值,需要根據設計圖以及banner圖片的個數(shù)以及位置進行計算得出, 
                    padding: 動態(tài)值,需要根據設計圖以及banner圖片的個數(shù)以及位置進行計算得出
                }">
                <image :src="item" 
                    class="slide-image" 
                    :style="{
                        transform: currentIndex===bannerIndex?'scale(' + scaleX + ',' + scaleY + ')':'scale(1,1)',
                        transitionDuration: '.3s',
                        transitionTimingFunction: 'ease'
                    }"/>
            </div>
          </swiper-item>
        </div>
    </swiper>
復制代碼

其中幾個出現(xiàn)的參數(shù):

currentIndex:即當前展現(xiàn)的banner項的索引

bannerIndex:即banner項在整個圖片列表中的索引

scaleX以及scaleY:即你希望的主項的放大的倍數(shù),此項的值可能需要我們根據屏幕寬度以及設計稿的展示來進行計算

這幾個樣式就是:將當前展示的圖片放大一定的倍數(shù)

到了這里,我們需要的結構以及style上的代碼基本上都有了,下面主要是script里對一些關鍵的參數(shù)進行控制,這里有個比較重要的函數(shù)@change

<script>
data () {
    return {
        autoplay: false,
        interval: 3000,
        duration: 300,
        circular: true,
        currentIndex: 0,
        scaleX: (634 / 550).toFixed(4),
        scaleY: (378 / 328).toFixed(4)
    }
},
methods: {
    // 控制currentIndex以及動畫執(zhí)行索引descIndex的值
    swiperChange (e) {
        const that = this
        this.currentIndex = e.mp.detail.current
        this.scaleX = (634 / 550).toFixed(4)
        this.scaleY = (378 / 328).toFixed(4)
    }
}
</script>
復制代碼

3.注意點

至此呢,主圖中的banner的主要效果基本已經實現(xiàn)了,看下來其實并不是很難,主要是一些細節(jié)需要特別注意:

3.1:previous-margin和next-margin的值

它們的值并不是隨便寫的,需要你根據設計圖去進行細微的計算

3.2:swiper-item內,image標簽外的class名為img-wrapper的div容器的樣式

其中我沒有寫出具體值的兩項屬性:justifyContent與padding,他們的具體值同樣需要你去進行計算,此時的計算不止會涉及到設計稿,他們的值還會根據當前展示出來的三張圖片在整個imgList(至少三項)中的順序的不同而不同,在我的實現(xiàn)中我使用了超長的三目運算符來保證每個圖片的具體的屬性值。。。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24822.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢