更新记录

1.0.0(2021-02-19) 下载此版本

第一次提交


平台兼容性

前言

简介: 1.翻转效果组件: 有4个类型:1:3d 2:翻页 3:自动翻页 4: 2d平面 2.自定义主题色,和显示内容等,开箱即用

有疑问

微信搜索“慢慢向好”小程序,找客服反馈,相应问题。

素材

图片资源

示例项目可直接运行

开始使用

下载源码解压,复制/components 下的组件至项目根目录的 /components 文件夹下

index.vuescript加入如下部分(自行选择需要展示的部分):

import ayturn from '@/components/ay-turn/ay-turn.vue';
    export default {
        components: {
            ayturn,
        },

        data() {
            return {
                list: [{

                    img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
                },
                {

                    img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
                },
                {
                    img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
                },
                {
                    img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
                },
                {
                    img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
                },
                {
                    img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
                },
                {
                    img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
                },
                {
                    img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
                },
                {
                    img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
                },],
                list_page:[{
                    size: '',
                    img: 'https://cdn.pixabay.com/photo/2021/01/25/11/54/woman-5948133__340.jpg',
                    txt: '名人名言',
                },
                {
                    size: 1,
                    txt: '开口就讲困难,成长已经远离你;一付出就想回报,机会已经远离你;一做事就在想个人利益,收获已经远',
                },
                {
                    size: 2,
                    txt: '离你;一有起色就在想谈条件,未来已经远离你;一合作就想自己如何不吃亏,事业已经远离你……格局有',
                },
                {
                    size: 3,
                    txt: '多大成就有多大!选择了安逸舒适,就不必羡慕别人的精彩;选择了惊涛骇浪,就无须向往岁月静好。不同',
                },
                {
                    size: 4,
                    txt: '的选择给予你不同的生活路径。只要认定你内心真正想要的,并为之持续努力,每个人都会是自己的人生赢家!',
                },
                {
                    size: 5,
                    txt: '但凡成功之人,往往都要经历一段没人支持、没人帮助的黑暗岁月,而这段时光,恰恰是沉淀自我的关键阶',
                },
                {
                    size: 6,
                    txt: '段。犹如黎明前的黑暗,捱过去,天也就亮了。所谓千里马,不一定是跑得最快的,但一定是耐力最好的。',
                },
                {
                    size: 7,
                    txt: '可以抱怨,但必须忍耐,积蓄力量,等待机会——这样,人生才会有希望。生命是一场从蒙昧到清醒的追寻。',
                },
                {
                    size: 8,
                    txt: '若能时时刻刻保持察觉,我们将可以在痛苦中找到恩典,可以少一些怀疑,多一些相信。生活越是艰苦,人就越',
                },
                {
                    size: 9,
                    txt: '发坚强;人越是坚强,生活也就变得越发简单。',
                },],
                list_page_auto:[{
                    size: 5,
                    txt: '修身治国平天下555',
                },
                {
                    size: 4,
                    txt: '修身治国平天下44444444',
                },
                {
                    size: 3,
                    txt: '修身治国平天下3333',
                },
                {
                    size: 2,
                    txt: '修身治国平天下222222222',
                },
                {
                    size: 1,
                    txt: '修身治国平天下11111',
                },],
                cover_auto:{},

                pros_img:'https://cdn.pixabay.com/photo/2020/03/13/08/34/south-station-4927286__340.jpg',
                cons_img:'https://cdn.pixabay.com/photo/2021/01/11/18/41/snowfall-5909261__340.jpg',
            }
        },
        onLoad() {
            let that = this;
            that.loadData();
        },
        onShow() {

        },
        // #ifdef MP-WEIXIN
        //微信小程序的分享
        onShareAppMessage: function(options) {

        },
        // #endif
        methods: {
            async loadData() {
                let that = this;

            },
        }
    }

index.vuetemplate加入如下部分:

<view>

        <view style="margin-top: 130upx;">
            <!-- 3d的会影响闪动一下,但不影响单独使用 -->
            <ayturn :type="3" :height="400" :width="300" :cover="cover_auto"  :list="list_page_auto"></ayturn>
        </view>

        <ayturn :type="1" :height="100" :width="200"  :list="list"></ayturn>

        <ayturn :type="4"  :height="150" :width="150" :pros_img="pros_img" :cons_img="cons_img"></ayturn>

        <ayturn :type="2" :height="640" :width="400" :list="list_page"></ayturn>

        <ayturn :type="1" :height="100" :width="200"  :list="list"></ayturn>
        <ayturn :type="1":height="100" :width="200" :marginTop="10" :list="list"></ayturn>
        <ayturn :type="1" :height="100" :width="200" :marginTop="10" :list="list"></ayturn>
        <ayturn :type="1" :height="100" :width="200" :marginTop="10" :list="list"></ayturn>
        <ayturn :type="1" :height="100" :width="200" :marginTop="10" :list="list"></ayturn>
        <ayturn :type="1" :height="100" :width="200" :marginTop="10" :list="list"></ayturn>
        <ayturn :type="1" :height="100" :width="200" :marginTop="10" :list="list"></ayturn>
    </view>

参考

参考链接1 参考链接2 参考链接3 参考链接4

供学习整理,易于下次便捷使用与快捷重复使用,如有任何冒犯的地方,可微信搜索“慢慢向好”小程序,找客服说明删除

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问