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

最近开始研究微信小程序的开发。虽然与一般的前端开发大体相似，但两者还是存在一定的区别。 （具体区别我就不赘述了，因为这不是本文的重点，如有需要可以百度下载）

由于开发类似，所以有一个需求：如何利用微信小程序实现H5中常用的屏幕翻转效果。需要前期预加载图片，控制是否可以翻页，控制翻页后处理的事件……

下面简单介绍一下实现过程：

.wxml 文件内容

页面上使用了小程序的主要组件：（滑块视图容器）。这个组件的使用很详细。使用方法可以查看小程序开发手册。

代码如下：

<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>

添加了图像预加载过程：-img-是使用的插件。下载地址：-img-

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

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

.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/583e2f08N13a