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; */
        width: 100%;
        height: 100%;
    }
    
    .swiper {
        height: 100%;
    }
    
    /* swiper-item 里面的圖片高度 */
    swiper-item image {
        width: 100%;
        height: 100%;
    }
</style>

pages.json里面引導頁去掉頭部標題欄，同時設置樣式使swiper全屏

"titleNView": false,