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

最新推荐文章于 2024-09-05 23:24:26 发布

置顶

走在程序路上的码农

最新推荐文章于 2024-09-05 23:24:26 发布

阅读量3.9k

点赞数

分类专栏：微信小程序开发

本文链接：https://blog.csdn.net/bestchqun/article/details/82385698

版权

本文介绍了如何使用微信小程序开发类似H5的翻屏效果，涉及关键点包括图片预加载、页面控制和翻页事件处理。主要利用了小程序的swiper组件，并引用了wxapp-img-loader插件进行图片加载。在index.wxml、index.js和index.wxss文件中进行了具体实现。

摘要由CSDN通过智能技术生成

关于使用微信小程序制作类似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/583e2f08N13a