uniapp 启动页轮播 代码收集

uniapp yekong 159℃

源插件地址
uniapp开发app需要一个启动页轮播切换效果,因为源插件效果,不太符合自己的需求,所以在原代码的基础上微调了一下
uniapp 启动页轮播

guide页面代码

<template>
    <view>
        <view class="swiper-css zqui-rel" :style="{ height: hpx }">
            <swiper class="swiper" :style="{ height: hpx }" :indicator-dots="indicatorDots" :autoplay="autoplay"
                :interval="interval" :duration="duration" @change="guideAction">
                <swiper-item class="flex1" v-for="(item, index) in imageList" :key="index">
                    <image class="flex-column image-size" mode="aspectFill" :src="item.src" />
                </swiper-item>
            </swiper>
            <!-- 按钮样式切换 -->
            <template v-if="cur != 2">
                <view class=" flex-column dots">
                    <block v-for="(item,index) in imageList" :key="index">
                        <view class="dot" :class="{'active':  index == cur}"></view>
                    </block>
                </view>
            </template>
            <!-- 第三张图使用按钮《立即进入》 -->
            <template v-if="cur == 2">
                <button class="flex-column cu-btn footer" @click="launchApp">立即体验</button>
            </template>
            <!-- 右上角跳过按钮 -->
            <view class="btn-box" @click="launchApp"><text class="passbtn">跳过</text></view>
        </view>
    </view>
</template>

<script>
    const animation = weex.requireModule('animation');
    export default {
        data() {
            return {
                //修改图片,文字描述
                imageList: [{
                        src: '/static/guide/guide1.jpg'
                    },
                    {
                        src: '/static/guide/guide2.jpg'
                    },
                    {
                        src: '/static/guide/guide3.jpg'
                    }
                ],
                indicatorDots: false,
                autoplay: false,
                interval: 10000,
                duration: 500,
                iStatusBarHeight: '0px',
                hpx: '100%',
                cur: 0,
                dotsStyles: ''
            };
        },
        onLoad() {
            let that = this;
            plus.navigator.closeSplashscreen();
            uni.getSystemInfo({
                success: function(res) {
                    that.hpx = res.windowHeight + 'px';
                }
            });
        },
        onReady() {
            this.move(0, 1);
        },
        methods: {
            launchApp() {
                //跳过引导页,储存本地值,下次进入直接跳过
                uni.setStorage({
                    key: 'launchFlag',
                    data: true,
                    success() {
                        uni.reLaunch({
                            url: '/pages/home/home'
                        })
                    }
                });
            },
            guideAction(event) {
                let that = this,
                    index = event.detail.current;
                that.cur = index;
                if (index == 0) {
                    that.move(0, 1);
                    that.moveTwo(150, 0.1);
                    that.moveThree(150, 0.1);
                    that.lefMainAction(0);
                }
                if (index == 1) {
                    that.moveTwo(0, 1);
                    that.move(150, 0.1);
                    that.moveThree(150, 0.1);
                    that.lefMainAction(uni.upx2px(80) + 'px');
                }
                if (index == 2) {
                    that.moveThree(0, 1);
                    that.moveTwo(150, 0.1);
                    that.move(150, 0.1);
                    that.lefMainAction(uni.upx2px(160) + 'px');
                }
            },
            lefMainAction(mum) {
                var testLM = this.$refs.lefMain;
                animation.transition(
                    testLM, {
                        styles: {
                            transform: 'translate(' + mum + ',0px)'
                        },
                        duration: 400, //ms
                        timingFunction: 'ease',
                        delay: 0 //ms
                    },
                    function() {}
                );
            },
            move(tran, opa) {
                var testEl = this.$refs.box1;
                animation.transition(
                    testEl, {
                        styles: {
                            transform: 'translate(' + tran + 'px,0px)',
                            transformOrigin: 'center center',
                            opacity: opa
                        },
                        duration: 800, //ms
                        timingFunction: 'ease',
                        delay: 0 //ms
                    },
                    function() {}
                );
                var textE2 = this.$refs.box2;
                animation.transition(
                    textE2, {
                        styles: {
                            transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',
                            transformOrigin: 'center center',
                            opacity: opa
                        },
                        duration: 800, //ms
                        timingFunction: 'ease',
                        delay: 0 //ms
                    },
                    function() {}
                );
            },
            moveTwo(tran, opa) {
                var testEl = this.$refs.box3;
                animation.transition(
                    testEl, {
                        styles: {
                            transform: 'translate(' + tran + 'px,0px)',
                            transformOrigin: 'center center',
                            opacity: opa
                        },
                        duration: 800, //ms
                        timingFunction: 'ease',
                        delay: 0 //ms
                    },
                    function() {}
                );
                var textE2 = this.$refs.box4;
                animation.transition(
                    textE2, {
                        styles: {
                            transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',
                            transformOrigin: 'center center',
                            opacity: opa
                        },
                        duration: 800, //ms
                        timingFunction: 'ease',
                        delay: 0 //ms
                    },
                    function() {}
                );
            },
            moveThree(tran, opa) {
                var testEl = this.$refs.box5;
                animation.transition(
                    testEl, {
                        styles: {
                            transform: 'translate(' + tran + 'px,0px)',
                            transformOrigin: 'center center',
                            opacity: opa
                        },
                        duration: 800, //ms
                        timingFunction: 'ease',
                        delay: 0 //ms
                    },
                    function() {}
                );
                var textE2 = this.$refs.box6;
                animation.transition(
                    textE2, {
                        styles: {
                            transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',
                            transformOrigin: 'center center',
                            opacity: opa
                        },
                        duration: 800, //ms
                        timingFunction: 'ease',
                        delay: 0 //ms
                    },
                    function() {}
                );
            }
        }
    };
</script>

<style lang="scss">
    page {
        background-color: #FFFFFF;
        min-height: 100%;
        height: 100%;
    }

    .guide {
        flex-direction: column;
        flex: 1;
    }

    .flex1 {
        flex: 1;
        width: 100%;
        background: red;
        height: 100%;
    }

    .image-size {
        width: 750rpx;
        height: 100%;
        position: absolute;
        // margin-left: 60rpx;
    }

    // .title-box {
    //  padding: 250rpx 0 120rpx 64rpx;
    // }

    .guide-title {
        font-size: 48rpx;
        font-weight: bold;
        color: rgba(58, 61, 68, 1);
    }

    .guide-subtitle {
        margin-top: 20rpx;
        font-size: 35rpx;
        color: rgba(131, 136, 146, 1);
        line-height: 50rpx;
    }

    .footer {
        width: 231rpx;
        height: 80rpx;
        text-align: center;
        position: fixed;
        bottom: 116rpx;
        left: 37%;
        font-size: 30rpx;
        color: #FFFFFF;
        background-color: #2B9939;
    }

    .btn-box {
        position: absolute;
        z-index: 99999;
        right: 40rpx;
        top: 120rpx;
    }

    .dots {
        display: flex;
        justify-content: center;
        position: absolute;
        z-index: 999;
        height: 151rpx;
        left: 0;
        right: 0;
        bottom: 20rpx;
    }

    .passbtn {
        color: #fff;
        text-align: center;
        border-width: 1rpx;
        border-color: rgba(0, 0, 0, 0.5);
        border-style: solid;
        border-radius: 30rpx;
        font-size: 28rpx;
        padding-top: 10rpx;
        padding-bottom: 10rpx;
        padding-left: 25rpx;
        padding-right: 25rpx;
    }

    .dot {
        margin: 0 4rpx;
        width: 15rpx;
        height: 15rpx;
        background: #CDD2DD;
        border-radius: 8rpx;
        transition: all .6s;
    }

    .dot.active {
        width: 40rpx;
        background: #838892 !important;
    }

    /* 相对定位 */
    .zqui-rel {
        position: relative;
    }

    .swiper-css {
        width: 750rpx;
    }

    .swiper-item {
        width: 750rpx;
    }
</style>

judge代码

<template>
    <view class="content"></view>
</template>

<script>
    export default {
        onLoad() {
            this.checkGuide();
        },
        methods: {
            checkGuide() {
                uni.redirectTo({
                    url: '/pages/guide/guide'
                });
                console.log("进入checkGuide判断页");
                // 思路: 检测是否有启动缓存,如果没有,就是第一次启动,第一次启动就去 启动介绍页面
                // try {
                //  var launchFlag = uni.getStorageSync('launchFlag');
                //  console.log("launchFlag:" + launchFlag);
                //  if (launchFlag) { //判断本地缓存跳转首页
                //      uni.redirectTo({
                //          url: '/pages/home/home'
                //      });
                //  } else { //没有缓存进入启动页引导页
                //      console.log('去引导页');
                //      uni.redirectTo({
                //          url: '/pages/guide/guide'
                //      });
                //  }
                // } catch (e) {
                //  console.log(e.message);
                // }
            }
        }
    };
</script>

pages.json页面配置

//#ifdef APP-PLUS
        //启动页
        {
            "path": "pages/guide/judge",
            "style": {
                "enablePullDownRefresh": false,
                "onReachBottomDistance": 100,
                "navigationStyle": "custom",
                "app-plus": {
                    "contentAdjust": false,
                    "bounce": "none"
                }
            }
        },
        {
            "path": "pages/guide/guide",
            "style": {
                "enablePullDownRefresh": false,
                "onReachBottomDistance": 100,
                "navigationStyle": "custom",
                "app-plus": {
                    "contentAdjust": false,
                    "bounce": "none"
                }
            }
        },
        // #endif
喜欢 (2)