微信小程序非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 相关文章推荐
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
比较node.js和Deno
Apr 27 Javascript
JavaScript实现音乐播放器
Aug 14 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Python模拟三级菜单效果
2017/09/11 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
python实现最短路径的实例方法
2020/07/19 Python
python zip()函数的使用示例
2020/09/23 Python
工程测量与监理专业应届生求职信
2013/11/27 职场文书
代理协议书范本
2014/04/22 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
新闻发布会策划方案
2014/06/12 职场文书
自我工作评价范文
2015/03/06 职场文书
演讲开场白和结束语
2015/05/29 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
python 如何获取页面所有a标签下href的值
2021/05/06 Python
javascript对象3个属性特征
2021/11/17 Javascript