微信小程序非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 相关文章推荐
js下用层来实现select的title提示属性
Feb 23 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 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
mysql数据库差异比较的PHP代码
2012/02/05 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
Mootools 1.2教程 类(一)
2009/09/15 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
js的[defer]和[async]属性
2014/11/24 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
js实现时钟定时器
2020/03/26 Javascript
Python实现的简单hangman游戏实例
2015/06/28 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
浅谈html5 响应式布局
2014/12/24 HTML / CSS
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
自荐信包含哪些内容
2013/10/30 职场文书
网吧收银员岗位职责
2013/12/14 职场文书
文明倡议书范文
2014/04/15 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
安全施工标语
2014/06/07 职场文书
高中校园广播稿
2014/10/21 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL