需要解決的問題

最近幾日一直在看怎麼製作微信小程式的swiper輪播圖。因為我既需要產生小程式的程式碼，也需要產生H5版程式碼，如果寫兩套效率會比較低下，所以選擇了uni-app。

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

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

①在swiper中怎樣加入css3流行的animate.css 動畫。
②添加好後如果滑動了輪播圖，怎麼能保證下一螢幕的動畫不會自動播放。
③怎麼能實現輪播圖的無限循環播放。
④怎麼能實現，當使用者點擊一個按鈕之後，可以跳到指定的swiper-item中。也就是跳到指定的螢幕。
⑤小程式和H5版的程式碼會產生一個頭部，在H5版中需要隱藏掉導覽列。

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

程式碼實作

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

我們先來看下程式碼：

<template>
    <view>
        <button>跳转到第二屏</button>
        <swiper>
            <swiper-item>
                <view>
                    <image></image>
                </view>
            </swiper-item>
            <swiper-item>
                <view>
                    <image></image>
                </view>
            </swiper-item>
            <swiper-item>
                <view>
                    <image></image>
                </view>
            </swiper-item>
            <swiper-item>
                <view>
                    <image></image>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

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

        },
        methods: {
            changeSwiper(event){    // 清空除了当前swiper以外的所有动画
                let current = event.detail.current;    // 当前页下标
                this.item_id = &#39;slide&#39;+current;     // 这里必须记录，否则只能跳转一次
                switch (current){
                    case 0:
                        this[&#39;animate_1&#39;] = this[&#39;animate_2&#39;] = this[&#39;animate_3&#39;] = &#39;&#39;;
                    break;
                    case 1: 
                        this[&#39;animate_0&#39;] = this[&#39;animate_2&#39;] = this[&#39;animate_3&#39;] = &#39;&#39;; 
                    break;
                    case 2:
                        this[&#39;animate_0&#39;] = this[&#39;animate_1&#39;] = this[&#39;animate_3&#39;] = &#39;&#39;;
                    break;
                    case 3:
                        this[&#39;animate_0&#39;] = this[&#39;animate_1&#39;] = this[&#39;animate_2&#39;] = &#39;&#39;;
                    break;
                }

            },
            changeFinish(event){ // swiper动画完成之后，给当前swiper添加动画效果
                let current = event.detail.current;
                switch(current){
                    case 0: 
                        this[&#39;animate_0&#39;] = &#39;animated swing&#39;;
                    break;
                    case 1:
                        this[&#39;animate_1&#39;] = &#39;animated shake&#39;;
                    break;
                    case 2:
                        this[&#39;animate_2&#39;] = &#39;animated tada&#39;;
                    break;
                    case 3:
                        this[&#39;animate_3&#39;] = &#39;animated heartBeat&#39;;
                    break;
                }
            },
            goChange(){
                this.item_id = &#39;slide1&#39;;
            }
        }
    }
</script>

<style>
    @import &#39;../../common/animate.css&#39;;
    
    .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.jsloop参数的功能。这里我掉到了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即可。

微信小程序代码

<!--index.wxml-->
<view>
    <button>跳转到</button>
    <swiper>
        <swiper-item>
            <image></image>
        </swiper-item>
        <swiper-item>
            <image></image>
        </swiper-item>
        <swiper-item>
            <image></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;
        }
    }
})

我将代码托管到了腾讯云开发者平台，需要的话可以参考。在代码目录unpackage/dist/build/h5中，就是生成好的H5版页面。需要注意的是，要部署到web服务器使用，不支持本地file协议打开。
其中生成了两个版本的代码，方便大家参考。

推荐教程：《微信小程序》

以上是小程式swiper輪播CSS3動畫及跳到指定swiper-item的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：segmentfault。如有侵權，請聯絡admin@php.cn刪除

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O，這在很大程度上要歸功於流。流媒體匯總處理數據，避免內存過載 - 大型文件，網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript：性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在：1)Python作為解釋型語言，運行速度較慢，但開發效率高，適合快速原型開發；2)JavaScript在瀏覽器中受限於單線程，但在Node.js中可利用多線程和異步I/O提升性能，兩者在實際項目中各有優勢。

JavaScript的起源：探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年，由布蘭登·艾克創造，實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後：什麼語言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行，依賴JavaScript引擎解析和執行代碼。 1）解析階段生成抽象語法樹（AST）；2）編譯階段將AST轉換為字節碼或機器碼；3）執行階段執行編譯後的代碼。

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

See all articles