引导页

说明

1. nvue不支持App.vue中引用的公共样式
2. 去掉原生导航条

{
    "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:'轻快 便捷 丰富 实惠',
                    text2:'移动OA 您的生活办公好帮手',
                    image:'../static/guide/guide-1.png'
                },{
                    text1:'优惠连绵不断 功能一如既往',
                    text2:'充值打折 玩转流量 宽带优惠 消费查询',
                    image:'../static/guide/guide-2.png'
                },{
                    text1:'多姿多彩好生活',
                    text2:'生活缴费 社保查询',
                    image:'../static/guide/guide-3.png'
                },{
                    text1:'优质特产欢乐购',
                    text2:'丰富的原生态产品',
                    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>

引导页需要资源

guide-1.png guide-2.png guide-3.png guide-4.png