-
概念
- 每个应用刚下载打开的时候都有个欢迎的页面，是用户启动时应用是看到的第一眼界面，漂亮的欢迎页面给用户带来好心情。
-
如何制作
-
wxml布局
- 通常欢迎页面都使用swiper滑动视图实现多张的切换效果，切换到最后一张的时候点击“立即体验”进入主界面
- <swiper indicator-dots="true">
<block wx:for="{{imgs}}" wx:for-index="index">
<swiper-item class="swiper-items" >
<image class="swiper-image" src="{{item}}" bindload="loadHandle"></image>
//最后一张显示按钮
<button class="button-img" bindtap="startHandle" wx:if="{{index == imgs.length - 1}}" >立即体验</button>
</swiper-item>
</block>
</swiper>
-
js逻辑
- Page({
data:{
imgs:[
"../../images/start1.png",
"../../images/start1.png"
]
},
//绑定按钮事件
startHandle(){
wx.redirectTo({url: "../login/login"})
},
//图片加载完毕触发
loadHandle: function(){
//如果已经登录，就直接跳到主页面
var token = wx.getStorageSync("token");
if(token){
//这里也可以设置定时setTimeout
wx.switchTab({url: "../index/index"})
}
}
})
-
wxss样式
- swiper {
position: absolute;
height: 100%;
width: 100%;
}
.swiper-image {
height: 100%;
width: 100%;
opacity:0.9;
}
.button-img{
position: relative;
bottom: 90px;
height: 40px;
width: 120px;
opacity:0.6;
}
-
APP全局设置
- app.json中的需要把欢迎页放在pages对象第一行
-
效果描述
- 屏幕一整张欢迎图片，下方中间一个立即体验的按钮