用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

2010湖人vs太阳季后赛:小程序swiper輪播CSS3動畫及跳轉到指定swiper-item實現思路

湖人vs爵士季后赛 www.nbgeh.club Rolan 2019-6-3 00:08

需要解決的問題近幾日一直在看怎樣制作微信小程序的swiper輪播圖。因為我既需要生成小程序的代碼,也需要生成H5版代碼,如果編寫兩套效率會比較低下,所以選擇了uni-app。uni-app已經在基礎組件swiper中已經直接支持 ...

需要解決的問題

近幾日一直在看怎樣制作微信湖人vs爵士季后赛的swiper輪播圖。因為我既需要生成小程序的代碼,也需要生成H5版代碼,如果編寫兩套效率會比較低下,所以選擇了 uni-app 。

uni-app 已經在基礎組件 swiper 中已經直接支持了輪播動畫。

我主要需要解決的是以下幾個問題:

animate.css
swiper-item

以下就是我整個制作的思路過程,僅供參考。另外,代碼是 uni-app 開發,所以在小程序中和H5中測試都沒有問題。另外為了方便 小程序 開發同學了解,會提供 小程序 版代碼和 uni-app代碼供參考。

代碼實現

在H5開發中經常使用的就是 animate.css 。在微信中自然是支持的,因為微信會對上傳的小程序有大小限制,所以這里我使用了一個極簡化的 animate.css ,其中刪掉了很多 -webkit-animation 開頭的css3。因為我們只需要在小程序和H5中運行,這樣做影響也不大。如果需要的話,可以從下面的代碼中獲取。

我們先來看下代碼:

<template>
    <view class="content">
        <button type="primary" @tap="goChange">跳轉到第二屏</button>
        <swiper class="content-swiper" :vertical="true" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" @change="changeSwiper" @animationfinish="changeFinish" :current-item-id="item_id" circular="true">
            <swiper-item item-id="slide0">
                <view class="swiper-item">
                    <image src="../../static/uni.png" :class="animate_0"></image>
                </view>
            </swiper-item>
            <swiper-item item-id="slide1">
                <view class="swiper-item">
                    <image src="../../static/uni.png" :class="animate_1"></image>
                </view>
            </swiper-item>
            <swiper-item item-id="slide2">
                <view class="swiper-item">
                    <image src="../../static/uni.png" :class="animate_2"></image>
                </view>
            </swiper-item>
            <swiper-item item-id="slide3">
                <view class="swiper-item">
                    <image src="../../static/uni.png" :class="animate_3"></image>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                item_id: 'slide2',
                animate_0: 'animated swing',
                animate_1: '',
                animate_2: '',
                animate_3: ''
            }
        },
        onLoad() {

        },
        methods: {
            changeSwiper(event){    // 清空除了當前swiper以外的所有動畫
                let current = event.detail.current;    // 當前頁下標
                this.item_id = 'slide'+current;     // 這里必須記錄,否則只能跳轉一次
                switch (current){
                    case 0:
                        this['animate_1'] = this['animate_2'] = this['animate_3'] = '';
                    break;
                    case 1: 
                        this['animate_0'] = this['animate_2'] = this['animate_3'] = ''; 
                    break;
                    case 2:
                        this['animate_0'] = this['animate_1'] = this['animate_3'] = '';
                    break;
                    case 3:
                        this['animate_0'] = this['animate_1'] = this['animate_2'] = '';
                    break;
                }

            },
            changeFinish(event){ // swiper動畫完成之后,給當前swiper添加動畫效果
                let current = event.detail.current;
                switch(current){
                    case 0: 
                        this['animate_0'] = 'animated swing';
                    break;
                    case 1:
                        this['animate_1'] = 'animated shake';
                    break;
                    case 2:
                        this['animate_2'] = 'animated tada';
                    break;
                    case 3:
                        this['animate_3'] = 'animated heartBeat';
                    break;
                }
            },
            goChange(){
                this.item_id = 'slide1';
            }
        }
    }
</script>

<style lang="scss">
    @import '../../common/animate.css';
    
    .content {
        text-align: center;
        .content-swiper{
            height: 100vh;
            
            image{
                height: 200upx;
                width: 200upx;
                margin-top: 200upx;
            }
        }
    }
</style>
  • 首先 uni-app 支持sass。在css中直接引入了簡潔版 animate.css 。 問題①
  • 之后通過查看文檔,發現 circular 這個參數可以實現類似H5頁面使用 swiper.js loop 參數的功能。這里我掉到了 uni-app 和 微信小程序 文檔描述的坑中。因為一直在找 loop (循環)這個參數,我甚至都以為實現不了這個無限循環的功能了呢。原來 小程序 中這個參數叫做 circular (圓形)。o(╯□╰)o 問題③
  • 因為我這里要實現一個豎屏的滑動效果,所以將參數 vertical 設置為 true 。
  • 在 uni-app 中,通過 change 事件,可以監聽每一個輪播屏的改變。在這個事件中,我記錄的當前屏的下標 current 。然后將 非當前屏 的全部css3動畫取消掉。最后在 animationfinish 事件中,當 swiper 滑動動畫結束后,給當前屏的元素添加css3動畫。 問題②
  • 在 uni-app 中有個 current-item-id 參數,代表當前所在滑塊的 item-id 。這個文檔我看了好久,才明白。原來是需要在 swiper-item 中指定上 item-id 。然后當用戶點擊事件觸發時,修改綁定到 current-item-id 上的值即可。我的代碼初始化時指定到了 item-id 為 slide2 這一屏上。 問題④
  • 最后一個問題時 uni-app 中隱藏掉H5導航欄。只需要在 pages.json 中設置 titleNView 為false 即可。

我將代碼托管到了 騰訊云開發者平臺 ,需要的話可以參考。在代碼目錄 unpackage/dist/build/h5 中,就是生成好的H5版頁面。需要注意的是,要部署到web服務器使用,不支持本地file協議打開。

微信小程序代碼

<!--index.wxml-->
<view class="container">
    <button bindtap='goChange'>跳轉到</button>
    <swiper vertical="true" circular="true" current="{{currentId}}" indicator-dots="true" bindchange="changeSwiper" bindanimationfinish="changeFinish">
        <swiper-item>
            <image src='../../static/uni.png' class='animated {{animate_0}}'></image>
        </swiper-item>
        <swiper-item>
            <image src='../../static/uni.png' class='animated {{animate_1}}'></image>
        </swiper-item>
        <swiper-item>
            <image src='../../static/uni.png' class='animated {{animate_2}}'></image>
        </swiper-item>
    </swiper>
</view>
//index.js
const app = getApp()

Page({
    data: {
        currentId: 0,
        animate_0: 'swing',
        animate_1: '',
        animate_2: ''
    },
    onLoad: function() {

    },
    goChange: function() {
        this.setData({
            currentId: 2
        });
    },
    changeSwiper: function(event) {
        let current = event.detail.current;
        switch (current) {
            case 0:
                this.setData({
                    animate_1: '',
                    animate_2: ''
                });
                break;
            case 1:
                this.setData({
                    animate_0: '',
                    animate_2: ''
                });
                break;
            case 2:
                this.setData({
                    animate_0: '',
                    animate_1: ''
                });
                break;
        }
    },
    changeFinish: function(event) {
        let current = event.detail.current;
        switch (current) {
            case 0:
                this.setData({
                    animate_0: 'swing',
                });
                break;
            case 1:
                this.setData({
                    animate_1: 'shake',
                });
                break;
            case 2:
                this.setData({
                    animate_2: 'tada',
                });
                break;
        }
    }
})
分享至 : QQ空間
收藏
原作者: siberiawolf 來自: segmentfault