說明

1. nvue不支持App.vue中引用的公共樣式
2. 去掉原生導(dǎo)航條

{
    "path": "pages/guide",
    "style": {
        "navigationStyle": "custom"
    }
},

代碼

<template>
    <swiper :style="{'height':`${windowHeight}px`}" :current="current" @change="changeGuide">
        <swiper-item class="guide" v-for="(item,index) in list" :key="index">
            <view class="guide-item-image">
                <image class="image" :src="item.image" mode=""></image>
            </view>
            <view class="guide-item-text">
                <text class="text-1">{{item.text1}}</text>
                <text class="text-2">{{item.text2}}</text>
            </view>
            <view class="btn" v-if="current==list.length-1" :style="{'width':`${windowWidth}px`}">
                <text class="btn-text">立即開啟</text>
            </view>
            <view class="scroll-tag" :style="{'width':`${windowWidth}px`}" v-if="current==index">
                <view :class="indexTag==current?'tag-line':'tag-point'" v-for="(itemTag,indexTag) in list" :key="indexTag" />
            </view>
        </swiper-item>
        
    </swiper>
</template>

<script>
    export default {
        data() {
            return {
                windowWidth: 0,
                windowHeight: 0,
                current:0,
                list:[{
                    text1:'輕快 便捷 豐富 實(shí)惠',
                    text2:'移動(dòng)OA 您的生活辦公好幫手',
                    image:'../static/guide/guide-1.png'
                },{
                    text1:'優(yōu)惠連綿不斷 功能一如既往',
                    text2:'充值打折 玩轉(zhuǎn)流量 寬帶優(yōu)惠 消費(fèi)查詢',
                    image:'../static/guide/guide-2.png'
                },{
                    text1:'多姿多彩好生活',
                    text2:'生活繳費(fèi) 社保查詢',
                    image:'../static/guide/guide-3.png'
                },{
                    text1:'優(yōu)質(zhì)特產(chǎn)歡樂購(gòu)',
                    text2:'豐富的原生態(tài)產(chǎn)品',
                    image:'../static/guide/guide-4.png'
                }]
            }
        },
        onLoad() {
            const res = uni.getSystemInfoSync();
            //console.log(res);
            this.windowHeight = res.windowHeight;
            this.windowWidth = res.windowWidth;
        },
        methods: {
            changeGuide(e){
                console.log(e.detail.current);
                this.current=e.detail.current;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .guide {
        align-items: center;

        .guide-item-image {
            justify-content: flex-end;
            height: 400px;

            .image {
                height: 280px;
                width: 280px;
            }
        }

        .guide-item-text {
            align-items: center;
            padding: 20px;

            .text-1 {
                font-size: 18px;
                color: #262626;
            }

            .text-2 {
                padding: 5px;
                font-size: 14px;
                color: #595959;
            }
        }
        .btn{
            flex-direction: row;
            justify-content: center;
            position: fixed;
            bottom: 80px;
            .btn-text{
                background-color: #409EFF;
                color: #FFFFFF;
                font-size: 16px;
                padding: 5px 30px;
                border-radius: 20px;
            }
        }
        

        .scroll-tag {
            flex-direction: row;
            justify-content: center;
            position: fixed;
            bottom: 50px;

            .tag-line {
                height: 6px;
                width: 18px;
                border-radius: 3px;
                background-color: #409EFF;
                margin: 0 4px;
            }

            .tag-point {
                height: 6px;
                width: 6px;
                border-radius: 3px;
                background-color: #bae3ff;
                margin: 0 4px;
            }
        }
    }
    
</style>

引導(dǎo)頁(yè)需要資源

guide-1.png

guide-2.png

guide-3.png

guide-4.png