유 니 앱 안내 페이지
12668 단어 uniapp
pages.json 첫 번 째 항목
{
"path": "pages/guide/guide", //
"style": {
"navigationStyle": "custom" //
}
},
안내 페이지
<template>
<view class='vh100 w100' v-if="!hasGuide">
<swiper class="swiper w100 h100" :indicator-dots="true" :autoplay="false" indicator-active-color="#fff" indicator-color="#eee">
<swiper-item class="item1 w100 h100">
</swiper-item>
<swiper-item class="item2 w100 h100">
</swiper-item>
<swiper-item class="relative item3 w100 h100">
<view class="absolute center btn" @click="toHome"> </view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
hasGuide:1
}
},
created() {
this.hasGuide = uni.getStorageSync('hasGuide')
console.log(this.hasGuide)
if(uni.getStorageSync('hasGuide')){
uni.switchTab({
url:'/pages/tabBar/Home/home'
})
}
},
methods: {
toHome(){
uni.setStorageSync('hasGuide',1)
uni.switchTab({
url:'/pages/tabBar/Home/home'
})
}
},
}
</script>
<style scoped lang='scss'>
.item1{
background: #ffc600 url(../../static/img/guide-1.png) no-repeat top left;
background-size: contain;
}
.item2{
background: #ffc600 url(../../static/img/guide-2.png) no-repeat top left;
background-size: contain;
}
.item3{
background: #ffc600 url(../../static/img/guide-3.png) no-repeat top left;
background-size: contain;
.btn{
bottom: 80rpx;
left: 50%;
transform: translateX(-50%);
border: 1rpx solid #333;
border-radius: 44rpx;
width: 250rpx;
height: 80rpx;
}
}
</style>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
유니앱 슬라이딩 옵션 실현본고의 실례는 여러분에게 유니앱이 슬라이딩 옵션 카드를 실현하는 구체적인 코드를 공유하여 참고하도록 하였으며, 구체적인 내용은 다음과 같다. tabControl-tag.vue 페이지 참조 1. 사용법: scrollF...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.