집 > 기사 > 웹 프론트엔드 > 미니 프로그램 스와이프 캐러셀 CSS3 애니메이션 및 지정된 스와이프 항목으로 이동하는 데 사용

미니 프로그램 스와이프 캐러셀 CSS3 애니메이션 및 지정된 스와이프 항목으로 이동하는 데 사용

hzc앞으로: 2020-06-22 11:32:553057검색

내 WeChat 공개 계정: 프런트 엔드 육성으로 가는 길, 팔로우를 환영합니다.

해결해야 할 문제

최근 며칠 동안 WeChat 미니 프로그램용 스위퍼 캐러셀을 만드는 방법을 살펴보았습니다. 미니 프로그램용 코드와 H5 버전 코드를 모두 생성해야 하기 때문에 2개 세트로 작성하는 것은 비효율적이라 유니앱을 선택했습니다.

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 🎜🎜animate.css🎜🎜 애니메이션을 추가하는 방법. 🎜
🎜②캐러셀 이미지를 추가한 후 슬라이드하면 다음 화면의 애니메이션이 자동으로 재생되지 않도록 어떻게 보장할 수 있나요? 🎜
🎜 ③캐러셀 이미지의 무한 루프 재생을 달성하는 방법. 🎜
🎜IV는 어떻게 구현하나요? 사용자가 버튼을 클릭하면 지정된 🎜🎜swiper-item🎜🎜으로 이동할 수 있습니다. 즉, 지정된 화면으로 점프합니다. 🎜
🎜⑤애플릿 및 H5 버전의 코드는 헤더를 생성하며, H5 버전에서는 탐색 모음을 숨겨야 합니다. 🎜

🎜다음은 참고용으로 제 전체 제작 과정입니다. 또한 코드는 uni-app으로 개발되었기 때문에 미니프로그램이나 H5에서 테스트하는데 문제가 없습니다. 또한 미니 프로그램 개발자의 이해를 돕기 위해 미니 프로그램 버전 코드와 uni-app 코드를 제공합니다. 참조. 🎜🎜🎜코드 구현🎜🎜🎜H5 개발에 자주 사용되는 것이 animate.css입니다. WeChat에서는 업로드되는 미니 프로그램에 크기 제한이 있기 때문에 자연스럽게 지원됩니다. 따라서 여기서는 -animation으로 시작하는 -webkit css3를 많이 삭제한 매우 단순화된 <code>animate.css를 사용했습니다. . 작은 프로그램과 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>

우선<code>uni-app支持sass。在css中直接引入了简洁版animate.css。问题①
之后通过查看文档，发现circular这个参数可以实现类似H5页面使用swiper.jsloop参数的功能。这里我掉到了<code>uni-app和微信小程序文档描述的坑中。因为一直在找loop（循环）这个参数，我甚至都以为实现不了这个无限循环的功能了呢。原来小程序中这个参数叫做circular（圆形）。o(╯□╰)o 问题③
因为我这里要实现一个竖屏的滑动效果，所以将参数vertical设置为true。
在<code>uni-app中，通过change事件，可以监听每一个轮播屏的改变。在这个事件中，我记录的当前屏的下标current。然后将非当前屏的全部css3动画取消掉。最后在animationfinish事件中，当swiper滑动动画结束后，给当前屏的元素添加css3动画。问题②
在<code>uni-app中有个current-item-id参数，代表当前所在滑块的 item-id。这个文档我看了好久，才明白。原来是需要在swiper-item中指定上item-id。然后当用户点击事件触发时，修改绑定到current-item-id上的值即可。我的代码初始化时指定到了item-id为slide2这一屏上。问题④
最后一个问题时<code>uni-app中隐藏掉H5导航栏。只需要在pages.json中设置titleNView为false即可。

微信小程序代码

<!--index.wxml-->
<view class="container">
    <button bindtap=&#39;goChange&#39;>跳转到</button>
    <swiper vertical="true" circular="true" current="{{currentId}}" indicator-dots="true" bindchange="changeSwiper" bindanimationfinish="changeFinish">
        <swiper-item>
            <image src=&#39;../../static/uni.png&#39; class=&#39;animated {{animate_0}}&#39;></image>
        </swiper-item>
        <swiper-item>
            <image src=&#39;../../static/uni.png&#39; class=&#39;animated {{animate_1}}&#39;></image>
        </swiper-item>
        <swiper-item>
            <image src=&#39;../../static/uni.png&#39; class=&#39;animated {{animate_2}}&#39;></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/h5uni-app

은 sass를 지원합니다. 간결한 버전

<a href="https://www.php.cn/weixin-marketing.html" target="_blank">animate.css</a>

이 CSS에 직접 도입되었습니다. 문제 ①🎜🎜🎜문서를 확인한 결과 🎜🎜circular🎜🎜이 매개변수는 swiper.js를 사용하여 유사한 H5 페이지를 구현할 수 있음을 발견했습니다🎜🎜 loop🎜🎜 매개변수의 기능입니다. 여기서 나는 🎜🎜uni-app🎜🎜 및 🎜🎜WeChat applet🎜🎜 문서에 설명된 함정에 빠졌습니다. 🎜🎜loop🎜🎜(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🎜🎜로 설정하면 됩니다. 🎜

🎜WeChat 애플릿 코드🎜

rrreee🎜Tencent Cloud 개발자 플랫폼에서 코드를 호스팅했습니다. 필요한 경우 참조하실 수 있습니다. 코드 디렉터리 unpackage/dist/build/h5에는 생성된 H5 버전 페이지가 있습니다. 웹 서버에 배포할 때 로컬 파일 프로토콜은 지원되지 않습니다. 🎜참조를 위해 두 가지 버전의 코드가 생성되었습니다. 🎜🎜추천 튜토리얼: "🎜WeChat 미니 프로그램🎜"🎜

위 내용은 미니 프로그램 스와이프 캐러셀 CSS3 애니메이션 및 지정된 스와이프 항목으로 이동하는 데 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

json css css3 sass webkit 循环事件 animation 微信小程序 uni-app

성명：

이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：15가지 일반적인 Vue 인터뷰 질문 분석다음 기사：15가지 일반적인 Vue 인터뷰 질문 분석