今天给大家带来微信小程序动画动态引导界面模板制作设计教程，主要适合小程序打开引导页界面，也就是启动页界面制作。制作好以后效果图如下：
一、wxml页面代码如下：
<!--start.wxml-->
<view class="container">
<view class="remind-box" wx:if="{{remind}}">
<image class="remind-img" src="/static/images/more/loading.gif"></image>
</view>
<block wx:else>
<image class="title" src="/static/images/more/title8.png"></image>
<view class="content">
<view class="hd" style="transform:rotateZ({{angle}}deg);">
<image class="logo" src="{{userInfo.avatarUrl}}"></image>
<image class="wave" src="/static/images/more/wave.png" mode="aspectFill"></image>
<image class="wave wave-bg" src="/static/images/more/wave.png" mode="aspectFill"></image>
</view>
<view class="bd">
<image class="smalltitle" src="/static/images/more/confirm-word1.png"></image>
<view class="confirm-btn" bindtap='goToIndex'>
<text >立即体验</text>
</view>
<text class="copyright">© 2017 懒人模板 倾情出品</text>
</view>
</view>
</block>
</view>
|
二、wxss样式页面代码如下：
/**start.wxss**/.container { background: #118fff; align-items: stretch; padding: 0; height: 100%; overflow: hidden;}.content{ flex: 1; display: flex; position: relative; z-index: 10; flex-direction: column; align-items: stretch;
/**start.wxss**/
.container {
background: #118fff;
align-items: stretch;
padding: 0;
height: 100%;
overflow: hidden;
}
.content{
flex: 1;
查找
无结果
/pages/start/start.wxss
|
三、js页面代码如下：
//login.js
//获取应用实例
var app = getApp();
Page({
data: {
remind: '加载中',
angle: 0,
userInfo: {}
},
goToIndex:function(){
wx.switchTab({
url: '/pages/index/index',
});
},
onLoad:function(){
},
onShow:function(){
console.log('onLoad')
var that = this
app.getUserInfo(function (userInfo) {
that.setData({
userInfo: userInfo
})
})
},
onReady: function(){
var _this = this;
setTimeout(function(){
_this.setData({
remind: ''
});
}, 1000);
wx.onAccelerometerChange(function(res) {
var angle = -(res.x*30).toFixed(1);
if(angle>14){ angle=14; }
else if(angle<-14){ angle=-14; }
if(_this.data.angle !== angle){
_this.setData({
angle: angle
});
}
});
},
});
|
.jpg)
.jpg)
