微信小程序非swiper组件实现的自定义伪3D轮播图效果示例


Posted in Javascript onDecember 11, 2018

本文实例讲述了微信小程序非swiper组件实现的自定义伪3D轮播图效果。分享给大家供大家参考,具体如下:

效果如下:

微信小程序非swiper组件实现的自定义伪3D轮播图效果示例

我用了很笨的方法实现的,大致就是:

1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一个设置到右边,后面所有设置到最右边

2.当前点击的div(view)如果前面无内容,即第一个,那么,当前div(view)设置到中间,后面一个设置到右边,后面所有设置到最右边

3.当前点击的div(view)如果后面无内容,即最后一个,那么,当前div(view)设置到中间,前面一个设置到左边,前面所有设置到最左边

1.html

<view class='idx-content'>
 <view class='idx-swiper'>
  <view class='idx-cswp {{item.swpClass}}'
    wx:for="{{swiperList}}" wx:key=""
    bindtap="swpBtn"
    data-index="{{index}}">
   <image src='{{item.imgsrc}}' mode='widthFix'></image>
   <view class='swp-title' hidden="{{item.swpClass!=='swp-center'}}">
    <view class='swp-btime'>{{item.time}}</view>
    <view class='swp-bname'>{{item.bname}}</view>
   </view>
  </view>
 </view>
</view>

注:swp-title是标题,用hidden替代wx:if是因为会频繁切换。

2.wxss

.idx-content {
 overflow: hidden;
 padding: 0 40rpx;
}
.idx-content .idx-swiper {
 position: relative;
 margin: 40rpx 0;
 padding-bottom: 100%;
}
.idx-content .idx-swiper .idx-cswp {
 width: 70%;
 height: 100%;
 position: absolute;
 top: 0;
 border-radius: 6px;
}
.idx-content .idx-swiper .idx-cswp image {
 width: 100%;
 max-height: 600rpx;
}
.idx-content .idx-swiper .idx-cswp .swp-title .swp-btime {
 text-align: center;
 font-size: 28rpx;
}
.idx-content .idx-swiper .idx-cswp .swp-title .swp-bname {
 text-align: center;
 font-size: 24rpx;
}
.swp-left {/*左边样式*/
 transition: all .3s ease;
 transform: scale(0.8);
 left: -55%;
}
.swp-center {/*中间样式*/
 left: 15%;
 transition: all .3s ease;
 transform: scale(1);
}
.swp-right {/*右边样式*/
 transition: all .3s ease;
 transform: scale(0.8);
 left: 85%;
}
.swp-rightNo {/*最右边样式*/
 transition: all .3s ease;
 left: 150%;
}
.swp-leftNo {/*最左边样式*/
 transition: all .3s ease;
 left: -150%;
}

3.js

Page({
 data:{
  swiperList: [{//除了1,2之外,其它的swpClass都是swp-rightNo
   aurl:"../start/start",
   swpClass:"swp-center",
   time:"2018年3月下11",
   bname:"2018全球十大突破技术11",
   imgsrc:"../../public/img/swiper.png"
  }, {
   aurl:"#",
   swpClass:"swp-right",
   time: "2018年3月下22",
   bname: "2018全球十大突破技术22",
    imgsrc: "../../public/img/swiper2.png"
 }, {
  aurl:"#",
  swpClass:"swp-rightNo",
  time: "2018年3月下33",
  bname: "2018全球十大突破技术33",
  imgsrc: "../../public/img/swiper3.png"
 }]
  },
  swpBtn:function(e){
  var swp = this.data.swiperList;
  var max=swp.length;
  var idx=e.currentTarget.dataset.index;
  var prev = swp[idx-1];//前一个
  var next = swp[idx+1];//后一个
  var curView=swp[idx];//当前
  if (curView.swpClass ==='swp-center'){//如果当前是在中间的,即可跳转
   wx.navigateTo({
    url: curView.aurl,
   })
  }
  if(prev){//如果当前的前面有
   if (next) {//当前的后面有
    next.swpClass = "swp-right";
   }
   prev.swpClass ="swp-left";
   curView.swpClass = "swp-center";
   for (var i =0; i < idx; i++) { //当前前一个的前面所有
    swp[i].swpClass = 'swp-leftNo'
   }
  }
  if(next){//如果当前的后面有
   if(prev){//当前的前面有
    prev.swpClass = "swp-left";
   }
   curView.swpClass = "swp-center";
   next.swpClass = "swp-right";
   for (var i = (idx + 2); i < max; i++) {//当前后一个的后面所有
    swp[i].swpClass = 'swp-rightNo'
   }
  }else{
   prev.swpClass = "swp-left";
   curView.swpClass = "swp-center";
  }
  this.setData({
   swiperList: swp
  })
 },
})

如果要实现滑动切换,可用 bindtouchstartbindtouchend 来实现。 思路大概是滑动了一定距离之后就添加class。

还有一篇更简单的:用swiper来实现的3d轮播

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 #Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 #jQuery
如何让node运行es6模块文件及其原理详解
Dec 11 #Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 #jQuery
详解react阻止无效重渲染的多种方式
Dec 11 #Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 #jQuery
利用jsonp解决js读取本地json跨域的问题
Dec 11 #Javascript
You might like
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
很可爱的输入框
2008/08/03 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
jquery实现动态画圆
2014/12/04 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
如何从零开始手写Koa2框架
2019/03/22 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
开业庆典主持词
2014/03/21 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
未中标通知书
2015/04/17 职场文书
怎样写家长意见
2015/06/04 职场文书
单位证明范文
2015/06/18 职场文书
单独二胎证明
2015/06/24 职场文书