yinchuan-community-all/mini-program/smart-city-yinchuan-wx/pages/guide/guide_old.vue

<template>
    <view class="swiper-container">
        <swiper class="guide_swiper" :autoplay="autoplay" :interval="interval" :duration="duration"
                @change="swiperChange">
            <block v-for="(item, index) in imgUrls" :key="index">
                <swiper-item>
                    <image :src="item" mode="aspectFit" class="slide-image"></image>
                    <button class="button-img" @tap="goto_next" v-if="index == imgUrls.length - 1">立即体验</button>
                </swiper-item>
            </block>
        </swiper>

        <view class="dots">
            <block v-for="(item, index) in imgUrls" :key="index">
                <view :class="'dot' + (index == swiperCurrent ? ' active' : '')"></view>
            </block>
        </view>

    </view>
</template>

<script>
    var app = getApp()
    export default {
        data() {
            return {
                imgUrls: ["https://szsq.nxzhsq.cn/community/miniofile/image/guide_rl.png", "https://szsq.nxzhsq.cn/community/miniofile/image/guide_sq.png", "https://szsq.nxzhsq.cn/community/miniofile/image/guide_jr.png", "https://szsq.nxzhsq.cn/community/miniofile/image/guide_km.png"],
                //广告轮播图
                autoplay: false,
                interval: 5000,
                duration: 300,
                swiperCurrent: 0
            };
        },

        components: {},
        props: {},

        /**
         * 生命周期函数--监听页面加载
         */
        onReady: function (options) {
            console.log("onready");
            //调用API从本地缓存中获取数据
            var isFir = uni.getStorageSync('isFirst');

            if (isFir == 'true') {
                uni.reLaunch({
                    url: "/pages/index/index?isFlush=true"
                })
            }
        },
        onLoad() {
        },
        methods: {
            goto_next: function (val) {
                uni.setStorageSync("isFirst", 'true');
                uni.reLaunch({
                    url: "/pages/index/index?isFlush=true"
                })
            },
            swiperChange: function (e) {
                this.swiperCurrent = e.detail.current
            }
        }
    };
</script>
<style>
    page {
        background-color: #fff;
    }

    .swiper-container {
        position: relative;
    }

    .guide_swiper {
        width: 100%;
        height: 100vh;
    }

    .slide-image {
        margin: 0 auto;
        height: 100vh;
        width: 100%;
    }

    .button-img {
        position: fixed;
        z-index: 1000;
        bottom: 220 rpx;
        width: 210 rpx;
        height: 60 rpx;
        line-height: 60 rpx;
        left: 270 rpx;
        font-size: 30 rpx;
        text-align: center;
        box-sizing: border-box;
        background-color: #33b6ea;
        opacity: 0.7;
        color: #fff;
        border-radius: 30 rpx;
    }

    .dots {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        right: 0;
        bottom: 150 rpx;
        display: flex;
        justify-content: center;
    }

    .dot {
        margin: 0 8 rpx;
        width: 14 rpx;
        height: 14 rpx;
        background: #33b6ea;
        border-radius: 8 rpx;
        transition: all .6s;
    }

    .dot.active {
        width: 24 rpx;
        background: #f80;
    }

</style>