E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

关于使用微信小程序制作类似H5的翻屏效果近期开始在研究微信小程序的开发,虽然说大体跟一般的前端开发类似,但两者之间还是有一定差异的。(具体的差异就不展开了,因为不是本文的重点,有需要可以百度下) 既然开发类似,那么就有一个需求:怎样用微信小程序实现H5常用的翻屏效果。需要有前期的图片预加载,需要控制是否可翻页,需要控制翻页后处理的事件….以下就实现的过程做一个简单的介绍:index.wxml文件内容index.js文件内容index.wxss文件内容index.wxml文件内容页面上,主要使用的是小程序的组件:swiper(滑块视图容器),这个组件是详细用法,大家可以查看小程序的开发手册,swiper的用法代码如下:view class=’loading’ style=’display:{{isblock}};’  loading    加载中…  /loading/viewswiper 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/viewindex.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;  }}

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 关于使用微信小程序制作类似H5的翻屏效果
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏