今天给大家带来软件功能介绍滑动引导页特效制作设计模板教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/newperson/newperson.wxml-->
<view class="newperson_wrap">
<swiper duration="500">
<swiper-item style="background-image:url( {{img[0]}} )">
</swiper-item>
<swiper-item style="background-image:url( {{img[1]}} )">
</swiper-item>
<swiper-item style="background-image:url( {{img[2]}} )">
<view bindtap="toHome" class="tiyan_naw"></view>
</swiper-item>
</swiper>
</view>
|
二、wxss样式文件代码如下:
/* pages/newperson/newperson.wxss */
page{
height: 100%;
}
.newperson_wrap{
height: 100%;
}
.img_01{
height: 100%;
}
.newperson_wrap swiper{
height: 100%;
}
.newperson_wrap swiper swiper-item{
height: 100%;
background-position: center center;
background-size: contain;
}
.tiyan_naw {
position: absolute;
left: 170rpx;
bottom: 40rpx;
width: 400rpx;
height: 90rpx;
}
|
三、js页面代码如下:
// pages/newperson/newperson.js
Page({
data:{
img:["http://f3.v.veimg.cn/www_veryeast_cn/weixinApp/01.png","http://f3.v.veimg.cn/www_veryeast_cn/weixinApp/02.png","http://f3.v.veimg.cn/www_veryeast_cn/weixinApp/03.png"]
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
toHome:()=>{
wx.switchTab({
url: '../home/home'
})
}
})
|