引导页

作者: wppeng | 来源:发表于2021-09-16 13:31 被阅读0次

    说明

    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

    相关文章

      网友评论

        本文标题:引导页

        本文链接:https://www.haomeiwen.com/subject/pojrgltx.html