微信小程序非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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
从javascript语言本身谈项目实战
Dec 27 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
jquery操作select方法汇总
Feb 05 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
vue2配置scss的方法步骤
Jun 06 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程序猿都应该拜读的书
2014/12/31 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
php-msf源码详解
2017/12/25 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
JS 验证码功能的三种实现方式
2018/11/26 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
python 用for循环实现1~n求和的实例
2019/02/01 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
什么是lambda函数
2013/09/17 面试题
资料员的岗位职责
2013/11/20 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
入党转正申请书范文
2019/05/20 职场文书
Python中文纠错的简单实现
2021/07/07 Python