第⼀步:建3个页⾯⽂件。在pages⽬录下,新建index/init.vue、index/guide.vue、index/home.vue。 对应pages.json:
pages": [{
“path”: “pages/index/init”,
“style”: {
“navigationBarTitleText”: “⼊⼝页”
}
}, {
“path”: “pages/index/guide”,
“style”: {
“navigationBarTitleText”: “引导页”,
“titleNView”: false,
“app-plus”: {
“bounce”: “none”
}
}
}, {
“path”: “pages/index/home”,
“style”: {
注意排放顺序,init⼀定要第⼀个,作为⼊⼝页⾯。
init.vue
onLoad() {
// 从本地缓存中同步获取指定 key 对应的内容,⽤于判断是否是第⼀次打开应⽤
const value = uni.getStorageSync(‘launchFlag’);
if (value) {
// 如何已经有,直接去home⾸页
uni.switchTab({
url: ‘/pages/index/home’
});
} else {
// 没有值,跳到引导页,并存储,下次打开就不会进去引导页
uni.setStorage({
key: ‘launchFlag’,
data: true
});
uni.redirectTo({
url: ‘/pages/index/guide’
});
}
}
然后我们guide.vue页⾯就可以写引导页的内容了。
<swiper
class=“swiper”
circular
:indicator-dots=“true”
:current=“tabIndex”
@change=“changeTab”>
记得pages.json⾥⾯引导页去掉头部标题栏,同时设置样式使swiper全屏。
“titleNView”: false,
Uni-App 简单引导页⽰例
最新推荐文章于 2024-07-14 19:45:55 发布