微信小程序非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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
javascript实现移动端轮播图
Dec 09 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新手入门学习方法
2011/05/08 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
js实现中文实时时钟
2020/01/15 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
python在不同层级目录import模块的方法
2016/01/31 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
python生成随机图形验证码详解
2017/11/08 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
创建Django项目图文实例详解
2019/06/06 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
django删除表重建的实现方法
2019/08/28 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
python小白切忌乱用表达式
2020/05/29 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
机电一体化自荐信
2013/12/10 职场文书
旅游个人求职信范文
2014/01/30 职场文书
教研活动总结
2014/04/28 职场文书
数学复习课教学反思
2016/02/18 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js