uni-app 设置引导页

---

• 首先在 pages.json 里配置，引导页放在第一显示页并禁用原生导航栏

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path" : "pages/intro/intro",
            "style" : {
                "app-plus":{
                    "titleNView":false //禁用原生导航栏
                }
            }
        },{
            "path": "pages/index/index", //首页
            "style": {
                "navigationBarTitleText": "首页"
            }
        }
        
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}

• 设置 intro.vue 页面样式，下面代码是简易的轮播图可以先复制下来看一下效果，再根据自己的需求调整

<template>
    <view class="content">
        <swiper class="swiper" :indicator-dots="true" :style="{'height':windowHeight}"
         @animationfinish="animationfinish">
            <swiper-item>
                <view class="swiper-item" :style="{'height':windowHeight,'background-color':'red'}">A</view>
            </swiper-item>
            <swiper-item>
                <view class="swiper-item" :style="{'height':windowHeight,'background-color':'green'}">B</view>
            </swiper-item>
            <swiper-item>
                <view class="swiper-item" :style="{'height':windowHeight,'background-color':'pink'}">C</view>
            </swiper-item>
            <swiper-item>
                <view class="swiper-item" :style="{'height':windowHeight,'background-color':'yellow'}">进入首页</view>
            </swiper-item>
        </swiper>
        <!-- <text :style="{color:'red','font-weight':200}">这是一个sssH1</text> -->
    </view>
</template>
<script>
    export default {
        data() {
            return {
                windowHeight: '603px'  //定义手机屏幕高度值变量
            }
        },
        onLoad() {
            var _me = this;
            uni.getSystemInfo({//获取手机屏幕高度信息，让swiper的高度和手机屏幕一样高
                success: function(res) {
                    console.log(res.model);
                    console.log(res.pixelRatio);
                    console.log(res.windowWidth);
                    console.log(res.windowHeight);//这里是手机屏幕高度
                    console.log(res.language);
                    console.log(res.version);
                    console.log(res.platform);
                    _me.windowHeight = res.windowHeight + 'px';
                    console.log('手机屏幕高度为' + _me.windowHeight);
                }
            });
        },
        methods: {
            animationfinish(e) {
                console.log(JSON.stringify(e.detail.current));
                //判断到最后一张后，自动转向进入首页
                if (e.detail.current == 3) {
                    console.log('动画已经播放结束');
                    setTimeout(function() {
                        uni.redirectTo({
                            url: '/pages/index/index'
                        });
                    }, 1000)
                }
            }
        }
    }
</script>
<style>
    .swiper {
        width: 100%;
        /*     height: 100vw; */
        /* background: red; */
    }
</style>

---

这个引导页是每次进入app的时候都会显示的，只需要第一次打开的时候出现，需要判断一下，后期附上代码

---

参考：https://www.uniapp.club/thread-13.htm