说明
- nvue不支持App.vue中引用的公共样式
- 去掉原生导航条
{
"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
网友评论