澳门乐透国际
欢迎您访问南京安优网络官方网站,本公司专注于:网站制作、小程序开发、网站推广。 24小时服务热线:400-8793-956
当前位置:南京网站制作公司 > 资讯中心 > 网站知识
小程序按需按需CSS3动画,并跳转到指定的按需扫描项目实现思路
来源:南京网站制作 时间:2019-09-24 08:10:12

有待解决的问题,今天南京小程序开发安优网络来分析最近几天,我一直在研究如何制作微信小程序的滑动旋转贴图。因为我需要同时生成小程序代码和H5版本代码。如果我编写两组代码,效率会很低,所以我选择uni-app。

 
uni-app基本组件滑动器中直接支持轮播动画。
 
南京小程序开发我需要解决的主要问题如下:
 
如何添加在滑动animate.css动画中流行的CSS3 。
(2)如果在添加旋转贴图后滑动动画,如何确保动画的下一个屏幕不会自动播放?
(3)如何实现旋转图的无限循环。
(4)如何实现?当用户单击一个按钮时,他可以跳到指定的按钮。swiper-item介质。那就是跳到指定的屏幕。
_Small程序和H5版本的代码将生成一个标题,在H5版本中需要隐藏导航栏。
以下是我制作思路的全过程,仅供参考。另外,代码是uni-appDevelopment,因此在小程序和H5中进行测试不是问题。另外,为方便起见,Small program发展学生的理解并提供Small program版本代码和uni-app代码以供参考。
 
代码实现
Anmate。CSS常用于H5开发中。当然,在Weichat中受支持,因为Weichat会限制上载的applet的大小,因此在这里我使用一个非常简化的小程序。animate.css其中许多已被删除。-webkit-animationCSS3开头。因为我们只需要在小程序和H5中运行,这不会产生太大影响。如有必要,可以从以下代码中获取它。
 
让我们首先看一下代码:
 
<template>
    <view class="content">
        <button type="primary"@tap="goChange"> jump to screen 2 </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 :class="animate_0"></image>
                </view>
            </swiper-item>
            <swiper-item item-id="slide1">
                <view class="swiper-item">
                    <image :class="animate_1"></image>
                </view>
            </swiper-item>
            <swiper-item item-id="slide2">
                <view class="swiper-item">
                    <image :class="animate_2"></image>
                </view>
            </swiper-item>
            <swiper-item item-id="slide3">
                <view class="swiper-item">
                    <image :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: {
            ChangeeSwiper (event) {// Clear all animations except the current swiper
                Let current = event. detail. current; // current page subscript
                This. item_id ='slide'+ current; // This must be recorded here, otherwise it can only be jumped once.
                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;
                }
 
            },
            After the change Finish (event) {// swiper animation is completed, add animation effects to the current 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支持萨斯。简版直接在CSS中引入animate.css。问题1。
然后,通过查看文档,您可以看到circular此参数使类似的H5页面可以使用swiper。JS loop函数的参数。我跌倒了。uni-app并且Wechat applet在文件中描述的坑中。因为我一直在寻找它。loop(循环)这个参数,我什至认为无法实现这个无限循环的功能。原始Small program此参数称为circular(圆形)。O()o 问题3
因为我想在这里实现垂直屏幕的滑动效果,所以将这些参数vertical设置为true。
在“ uni-app通过change事件传递”中,您可以收听广播屏幕中的所有更改。在这种情况下,我记录了当前屏幕的下标。current。然后非当前屏幕将取消所有CSS3动画。最后animationfinish一个事件当swiper滑动动画结束后,将CSS3动画添加到当前屏幕的元素中。问题2。
stay uni-app其中之一是current-item-id代表当前滑块的参数item-id。我在阅读文档很长时间之前才了解它。最初需要swiper-item在中指定item-id。然后当用户单击事件以触发时,将绑定修改为current-item-id上面的值即可。当它被初始化指定我的代码item-id通过slide2在该屏幕上。问题4
最后一个问题uni-app隐藏H5导航栏。仅需要由“ 是” pages.json设置。titleNViewfalse
微信小部件代码
<!--index.wxml-->
<view class="container">
    <button bindtap='goChange'> jump to </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;
        }
    }
})
我将代码托管在腾讯云开发者平台上,如有必要,您可以参考。在代码目录中unpackage/dist/build/h5,将以这种方式生成H5页面。应当注意,不支持将本地文件协议部署到网站服务器。生成了两个版本的代码供您参考。

本文地址:/web/2751.html
Tag:
专业服务:南京网站制作,南京网站制作公司,南京网站建设公司
联系电话:025-65016872
上一篇: 南京网站建设分享为您的企业选择合适的营销公司的4个技巧
下一篇: 返回列表
最新案例
泰杰赛
泰杰赛
苏派教育
苏派教育
全国大学生公共卫生大赛
全国大学生公共卫生大赛
南京德普筒仓建安工程有限公司
南京德普筒仓建安工程有限公司
中国非金属材料南京矿山工程有限公司
中国非金属材料南京矿山工程有限公司
你可能感兴趣
用户体验和搜索者意图
您在投资用户体验时获得的收益
为什么博客研究总是值得您的时间
如何开发微信小程序
南京网站制作教你如何将您的网站或URL提交给百度-完整指南
南京网站建设是如何增加您网站的转化次数
可用性测试:使用数据进行设计,而不是猜测
如何注册中文(.CN)域名 - 完整指南
最后更新
小程序按需按需CSS3动画,并跳转到指定的按需扫描项目实现思路 南京网站建设分享为您的企业选择合适的营销公司的4个技巧 南京网站建设是如何进行内容营销审核 WordPress网络安全:您的网站安全吗? 您网站主页的主要功能 南京网站建设为什么让你需要改变你的博客策略 好与坏:为什么一些网页设计机构外包他们的工作 南京网站建设您如何防止网站项目中的范围蔓延?
服务项目
南京网站制作 营销型网站 微信营销 IDC网站 精品案例
分享到:QQ空间新浪微博腾讯微博人人网微信