关于使用微信小程序制作类似H5的翻屏效果

近期开始在研究微信小程序的开发，虽然说大体跟一般的前端开发类似，但两者之间还是有一定差异的。(具体的差异就不展开了，因为不是本文的重点，有需要可以百度下)
既然开发类似，那么就有一个需求：怎样用微信小程序实现H5常用的翻屏效果。需要有前期的图片预加载，需要控制是否可翻页，需要控制翻页后处理的事件….

以下就实现的过程做一个简单的介绍：

• index.wxml文件内容
• index.js文件内容
• index.wxss文件内容

index.wxml文件内容

页面上，主要使用的是小程序的组件：swiper（滑块视图容器），这个组件是详细用法，大家可以查看小程序的开发手册，swiper的用法

代码如下：

<view class='loading' style='display:{{isblock}};'>
<loading>
加载中...
</loading>
</view>
<swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{current}}" vertical="{{vertical}}" class="swipermain {{isload ? 'imagessuccess' : ''}}-{{current}}" bindchange="doslide" bindanimationfinish="changeslide">
<swiper-item>
<view class='page firstLoad'>
<image src='../../images/logo.png' class='ele bigin logo'></image>
</view>
</swiper-item>
<swiper-item>
<view class='page secondLoad'></view>
</swiper-item>
</swiper>
<!-- 引入图片预加载组件 -->
<import src="../../img-loader/img-loader.wxml"/>
<template is="img-loader" data="{{ imgLoadList }}"></template>

其中添加了一个图片预加载过程：使用的是wxapp-img-loader是一款插件。 下载地址：wxapp-img-loader

一般在图片加载的过程中，有个loading的提示，可以在页面一开始添加：

<view class='loading' style='display:{{isblock}};'>
<loading>
加载中...
</loading>
</view>

index.js内容

代码如下：

// page/common/index.js
//引入图片预加载组件
const ImgLoader = require('../../img-loader/img-loader.js')
//生成一些测试数据
function genImgListData() {
let images = [
'http://img10.360buyimg.com/img/s600x600_jfs/t3586/215/2086933702/144606/c5885c8b/583e2f08N13aa7762.png',
'http://img10.360buyimg.com/img/s600x600_jfs/t3643/111/394078676/159202/a59f6b72/5809b3ccN41e5e01f.jpg',
'http://img10.360buyimg.com/img/s600x600_jfs/t3388/167/1949827805/115796/6ad813/583660fbNe5c34eae.jpg',
'http://img10.360buyimg.com/img/s600x600_jfs/t3163/281/5203602423/192427/db09be58/5865cb7eN808cc6f4.png',
'http://img10.360buyimg.com/img/s600x600_jfs/t3634/225/410542226/185677/c17f0ecf/5809b073N364fe77e.jpg',
'http://img10.360buyimg.com/img/s600x600_jfs/t3808/206/329427377/119593/a8cf7470/580df323Nb641ab96.jpg',
'http://img10.360buyimg.com/img/s600x600_jfs/t3805/133/325945617/116002/e90e0bdf/580df2b5Ncb04c5ac.jpg',
'http://img10.360buyimg.com/img/s600x600_jfs/t3046/316/3037048447/184004/706c779e/57eb584fN4f8b6502.jpg',
'http://img10.360buyimg.com/img/s600x600_jfs/t3580/212/1841964843/369414/e78739fb/58351586Ne20ac82a.jpg',
'http://img10.360buyimg.com/img/s600x600_jfs/t3274/70/4925773051/133266/fae6e84/585c9890Na19001c8.png',
'http://img10.360buyimg.com/img/s600x600_jfs/t3157/27/5204515328/123020/5f061d81/5865cbcaNfdf0557f.png',
'http://img10.360buyimg.com/img/s600x600_jfs/t3265/341/5152556931/143928/bdf279a4/5865cb96Nff26fc5d.png'
]

//images = images.concat(images.slice(0, 4))
return images.map(item => {
return {
url: item,
loaded: false
}
})
}
Page({

/**
* 页面的初始数据
*/
data: {
indicatorDots: true,
autoplay: false,
interval: 1000,
duration: 500,
current:0,
vertical:true,
loadimgnum:0,
isload:false,
isblock:'block',
imgList: genImgListData()
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//初始化图片预加载组件，并指定统一的加载完成回调
console.log(this.data.imgList)
this.imgLoader = new ImgLoader(this, this.imageOnLoad.bind(this));

this.loadImages();
},
loadImages() {
//同时发起全部图片的加载
this.data.imgList.forEach(item => {
this.imgLoader.load(item.url)
})
},
//加载完成后的回调
imageOnLoad(err, data) {
//记录加载完成图片的数量
var loadimgnum = this.data.loadimgnum + 1;
this.setData({ loadimgnum });
console.log(loadimgnum)
console.log('图片加载完成', err, data.src)
//每一张图加载完成后，更新属性
const imgList = this.data.imgList.map(item => {
if (item.url == data.src)
item.loaded = true
return item
})
this.setData({ imgList })
//判断加载完成的图片数跟总的图片数是否一致
if (this.data.imgList.length == loadimgnum) {
console.log('全部加载完成');
this.setData({ isload:true });
this.setData({ isblock:'none'});
}
},
changeslide:function(e){
console.log(e.detail.current)
this.setData({ current: e.detail.current});
},
doslide:function(){
//this.setData({ current:0 }) //固定在第一屏，停止翻页
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

index.wxss文件内容

代码如下：

/********** 初始化 **********/
view,scroll-view,swiper,swiper-item,icon,text,progress,mask,input,button,label,form,checkbox,checkbox-group,picker,picker-item,radio,radio-group,switch,slider,slector-item,action-sheet,action-sheet-cancel,action-sheet-item,loading,toast,modal,navigator,image,audio,video,map,canvas,native{
margin:0;
padding: 0;
}
swiper {
height: 100%; width: 100%;
font-size: 32rpx;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}
input,button {-webkit-appearance: none;appearance: none;}
textarea {resize: none;}
/* 禁止长按链接与图片弹出菜单 */
navigator,image {-webkit-touch-callout: none;touch-callout: none;}
/*去掉手持设备点击时出现的透明层*/
navigator,button,input {-webkit-tap-highlight-color: transparent;tap-highlight-color: transparent;}
input{outline:0;border:0;}
/********** 公共样式 **********/
/*伸缩的盒子*/
.box {display: -webkit-box;display: -webkit-flex;display: box;display: flex;}
.flex1 {-webkit-flex: 1;-webkit-box-flex: 1;box-flex: 1;flex: 1;}
.flex2 {-webkit-flex: 2;-webkit-box-flex: 2;box-flex: 2;flex: 2;}
.flex3 {-webkit-flex: 3;-webkit-box-flex: 3;box-flex: 3;flex: 3;}
/*box-sizing包括边框的宽度*/
.box-sizing {-moz-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;}
/*图片大小自适应*/
image{width: 100%;vertical-align: top;display: block;}
/*文字超出隐藏*/
.text-elli {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
/*清除浮动样式*/
.clear {clear: both;height: 0;overflow: hidden;}
.clearfix{zoom: 1; clear:both;}
.clearfix:after {display: block;height: 0;overflow: hidden;content: " ";visibility: hidden;clear: both;}
.fl{float: left;}
.fr{float: right;}
.hidden{display: none;}
.block{display: block;}

.bigin{ opacity: 0;}
.ele{ display: block; position: absolute;}

.loading{ width: 100%; height: 100%; position: absolute; top: 0rpx; left: 0rpx; z-index: 100; background: #fff;}
.page{ width: 100%; height: 100%; overflow: hidden;}
.firstLoad{ background: #900;}
.firstLoad .logo{ width: 261rpx; height: 45rpx; top: 3rpx; left: 5rpx;}
.imagessuccess-0 .firstLoad .logo{
-webkit-animation: 0.8s 0s fadeIn linear forwards;
animation: 0.8s 0s fadeIn linear forwards;
}
.secondLoad{ background: #363;}

@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@keyframes fadeIn {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}