更新记录

1.0.0（2021-02-19）

第一次提交

平台兼容性

前言

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

有疑问

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

素材

图片资源

示例项目可直接运行

开始使用

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

index.vue的script加入如下部分（自行选择需要展示的部分）：

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.vue的template加入如下部分：

<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

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