效果如下:

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

  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:;
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
})
},
})

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

还有一篇更简单的,用swiper来实现的3d轮播,请看这篇文章

小程序实现非swiper组件的自定义伪3D轮播图的更多相关文章

  1. 图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作

    图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...

  2. 微信小程序 - 3d轮播图组件(基础)

    <!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...

  3. 微信小程序3D轮播图

    <!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChang ...

  4. 小程序或者vue,解决菜单导航做做成轮播的样子

    案例: 其中最重要的思路就是如何让第二次或第三次以及后面的轮播有数据: 做法大致跟轮播图做法一样,只不过我们需要进行书写样式,代码如下: <!-- 做一个轮播图navbar demo --> ...

  5. 小程序坑之 swiper组件

    表现:swiper 内容 空白 原因:swiper组件的current值为n时,重新刷新页面,current值不变,当刷新后的swiper item的数量少于 n 时,swpier找不到对应的item ...

  6. 微信小程序之 Swiper(轮播图)

    1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://im ...

  7. 【微信小程序】获取轮播图当前图片下标、滑动展示对应的位数、点击位数展示对应图片

    业务需求: 3个图片轮番播放,可以左右滑动,点击指示点可以切换图片  index.wxml: 这里使用小程序提供的<swiper>组件autoplay:自动播放interval:自动切换时 ...

  8. 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)

    大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...

  9. HTML+CSS使用swiper快速生成最简单、最快捷、最易看懂的轮播图

    1.  在网页顶部输入swiper.com.con,进入swiper官网 2.   点击" API文档",获取轮播图代码的地方 3.   点击左侧"swiper初始化&q ...

随机推荐

  1. linux驱动---用I/O命令访问PCI总线设备配置空间

    PCI总线推出以来,以其独有的特性受到众多厂商的青睐,已经成为计算机扩展总线的主流.目前,国内的许多技术人员已经具备开发PCI总线接口设备的能 力.但是PCI总线的编程技术,也就是对PCI总线设备的操 ...

  2. Caused by:java.sql.BatchUpdateException:ORA-02291

    1.错误描述 Caused by:java.sql.BatchUpdateException:ORA-02291:违反完整约束条件(PEKING.FKA844BA60FCCDD33)-未找到父项关键字 ...

  3. ArgumentError: Error #1063: BasicChart/dataFunc() 的参数数量不匹配。应该有 2 个,当前为 3 个。

    1.错误描述 ArgumentError: Error #1063: BasicChart/dataFunc() 的参数数量不匹配.应该有 2 个,当前为 3 个. at mx.charts.char ...

  4. 芝麻HTTP: Python爬虫利器之Requests库的用法

    前言 之前我们用了 urllib 库,这个作为入门的工具还是不错的,对了解一些爬虫的基本理念,掌握爬虫爬取的流程有所帮助.入门之后,我们就需要学习一些更加高级的内容和工具来方便我们的爬取.那么这一节来 ...

  5. CentOS中配置NFS服务

    1.服务器端安装rpcbind.nfs-utils.nfs-server包 yum install nfs-utils -y 2.修改服务器端配置文件,添加需要共享的文件夹. vim /etc/exp ...

  6. 摘抄--全面理解面向对象的 JavaScript

    全面理解面向对象的 JavaScript JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向对象的语言,或 ...

  7. HALCON学习-资料

    HALCON学习网: http://www.ihalcon.com/ 学习资料推荐博客: http://k594081130.blog.163.com/blog/static/218359013201 ...

  8. Web前端开发学习笔记(二)

    Homework2:http://my.ss.sysu.edu.cn/wiki/display/WEB/Homework+2+-+Movie+Review 这份作业跟布局相关,因此很多都是布局的知识: ...

  9. .NET平台开源项目速览(21)Cron任务调度CronNET

    如果用知乎,可以关注专栏:.NET开源项目和PowerBI社区 Quartznet大名鼎鼎应该很少有人不知道,相关的开源项目很多,不过那东东对新手来说,有点晦涩,加上哪个Cron表达式,可能一进去云里 ...

  10. 消息中间件kafka+zookeeper集群部署、测试与应用

    业务系统中,通常会遇到这些场景:A系统向B系统主动推送一个处理请求:A系统向B系统发送一个业务处理请求,因为某些原因(断电.宕机..),B业务系统挂机了,A系统发起的请求处理失败:前端应用并发量过大, ...