uniapp 实现引导页 轮播图事例

第一步：建3个页面文件。在pages目录下，新建index/init.vue、index/guide.vue、index/home.vue。

 pages.json文件

{
    "pages": [{
			"path": "pages/index/init/init",
			"style": {
				"navigationBarBackgroundColor": "#fff"
			}
		},
		{
			"path": "pages/index/guide/guide",
			"style": {
				"navigationStyle": "custom",
				"navigationBarTextStyle": "black"
			}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationStyle": "custom",
				"navigationBarTextStyle": "black"
			}
		}]
}

　　注意排放顺序，init一定要第一个，作为入口页面。

init.vue页面：

onLoad() {
            // 从本地缓存中同步获取指定 key 对应的内容，用于判断是否是第一次打开应用
            const value = uni.getStorageSync('launchFlag');
            if (value) {
                // console.log(111)
                uni.navigateTo({
                    url:'../index'
                })
            } else {
                // console.log(222)
                // 没有值，跳到引导页，并存储，下次打开就不会进去引导页
                uni.setStorage({
                    key: 'launchFlag',
                    data: true
                });
                uni.redirectTo({
                    url: '../guide/guide'
                });
            }
        }

guide.vue页面：

<template>
    <view class="page-section-spacing">
        <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500">
            <swiper-item v-for="(item , index) in bann" :key="index" @click="bannertz(item)">
                <image :src="item.url" mode=""></image>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    import request from '../../../require.js'
    export default {
        data() {
            return {
                bann:[{'yd_id':1,'url':'http://sp.tp.xiniuwangluo.cn/image/default/3E2338F7CC8C4FF4B81F2CB7FDA4847B-6-2.jpg','type':2,'value':'活动'}]
            }
        },
        methods: {
            
        },
        onLoad() {
            let that = this;
            // 轮播图 自己封装的请求
            request.post('url', {}).then(res => {
                // console.log(res);
                if (res.return_code == '1000') {
                    that.bann = res.list;
                }
            })
        }
    }
</script>

<style scoped>
    page{
        height: 100%;
    }
    /* 轮播图 */
    .page-section-spacing {
        /* padding: 0 30rpx;
        margin-top: 20rpx; */
         100%;
        height: 100%;
    }
    
    .swiper {
        height: 100%;
    }
    
    /* swiper-item 里面的图片高度 */
    swiper-item image {
         100%;
        height: 100%;
    }
</style>

pages.json里面引导页去掉头部标题栏，同时设置样式使swiper全屏

"titleNView": false,