小程序实现非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:;
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轮播图的更多相关文章
- 图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作
图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...
- 微信小程序 - 3d轮播图组件(基础)
<!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...
- 微信小程序3D轮播图
<!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChang ...
- 小程序或者vue,解决菜单导航做做成轮播的样子
案例: 其中最重要的思路就是如何让第二次或第三次以及后面的轮播有数据: 做法大致跟轮播图做法一样,只不过我们需要进行书写样式,代码如下: <!-- 做一个轮播图navbar demo --> ...
- 小程序坑之 swiper组件
表现:swiper 内容 空白 原因:swiper组件的current值为n时,重新刷新页面,current值不变,当刷新后的swiper item的数量少于 n 时,swpier找不到对应的item ...
- 微信小程序之 Swiper(轮播图)
1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://im ...
- 【微信小程序】获取轮播图当前图片下标、滑动展示对应的位数、点击位数展示对应图片
业务需求: 3个图片轮番播放,可以左右滑动,点击指示点可以切换图片 index.wxml: 这里使用小程序提供的<swiper>组件autoplay:自动播放interval:自动切换时 ...
- 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)
大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
- HTML+CSS使用swiper快速生成最简单、最快捷、最易看懂的轮播图
1. 在网页顶部输入swiper.com.con,进入swiper官网 2. 点击" API文档",获取轮播图代码的地方 3. 点击左侧"swiper初始化&q ...
随机推荐
- 关于用wubi安装Ubuntu,总是提示“没有定义根文件系统”的问题
用diskgenius测试一下分区问题,就发现一些错误,所以怀疑可能就是因为这个分区参数错误导致WUBI安装不成功,费了大力气转移数据后,重新对硬盘分区,这里称赞一下diskgenius,的确不错,当 ...
- HighCharts之2D金字塔图
HighCharts之2D金字塔图 1.实例源码 Pyramid.html: <!DOCTYPE html> <html> <head> <meta char ...
- USB OTG简介、与普通USB线的区别
USB有三类接口A类接口 -----------最常见的扁平接口,四芯 VCC GND D+ D- B类接口 ...
- JavaScript去除日期中的“-”
JavaScript去除日期中的"-" 1.说明 经常会出现这样的情况,页面的日期格式是:YYYY-MM-DD,而数据库中的日期格式是:YYYYMMDD,两者之间需要转换一下,方能 ...
- c语言 第二次实验报告
一·实验题目,设计思路,实现方法 11-7 找鞍点 一个矩阵元素的"鞍点"是指该位置上的元素值在该行上最大.在该列上最小. 本题要求编写程序,求一个给定的n阶方阵的鞍点. 利用双重 ...
- C# 找出泛型集合中的满足一定条件的元素 List.Wher()
在学习的过程中,发现泛型集合List<T>有一个Where函数可以筛选出满足一定条件的元素,结合Lambda表达式使用特别方便,写出来与大家分享. 1.关于Func<> Fun ...
- winform自动更新程序实现
一.问题背景 本地程序在实际项目使用过程中,因为可以操作电脑本地的一些信息,并且对于串口.OPC.并口等数据可以方便的进行收发,虽然现在软件行业看着动不动都是互联网啊啥的,大有Web服务就是高大上的感 ...
- 搭建基于eclipse的纯的JavaWeb项目
-----------2016.9.9--------------------- 步骤: 1.搭建一个Java项目 2,字该项目下新建一个文件夹,表示根,名字为webapp(name随意) 3,在we ...
- 【BZOJ1855】股票交易(动态规划,单调队列)
[BZOJ1855]股票交易(动态规划,单调队列) 题面 BZOJ 题解 很显然,状态之和天数以及当天剩余的股票数有关 设\(f[i][j]\)表示第\(i\)天进行了交易,剩余股票数为\(j\)的最 ...
- 【BZOJ4916】神犇和蒟蒻(杜教筛)
[BZOJ4916]神犇和蒟蒻(杜教筛) 题面 BZOJ 求 \[\sum_{i=1}^n\mu(i^2)\ \ 和\ \sum_{i=1}^n\phi(i^2)\] 其中\[n<=10^9\] ...