微信小程序使用swiper组件实现层叠轮播图


Posted in Javascript onNovember 04, 2018

本文实例为大家分享了微信小程序实现层叠轮播图的具体代码,供大家参考,具体内容如下

wxml:

<view class="banner-swiper">
 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" current='{{swiperCurrent}}' 
indicator-color="{{beforeColor}}" indicator-active-color="{{afterColor}}" circular='{{circular}}' 
previous-margin="{{previousmargin}}" next-margin="{{nextmargin}}" bindchange="swiperChange" >
 <block wx:for="{{arr}}" wx:key="key"> 
  <swiper-item>
  <image src="{{item.images}}" class="slide-image{{index == swiperCurrent ? ' active' : ''}}" 
bindchange="chuangEvent" id="{{index}}"></image>
  </swiper-item>
 </block> 
 </swiper>
 </view>

wxss:

.banner-swiper {
 width: 100%;
 height: 500rpx;
 overflow: hidden;
}

swiper {
 display: block;
 height: 500rpx;
 position: relative;
}

.slide-image {
 width: 96%;
 display: block;
 margin: 0 auto;
 height: 450rpx;
 margin-top:25rpx;
}
.active{
 margin-top:0rpx;
 height: 500rpx;
}

js:

Page({
 data: {
 //轮播图
 swiperCurrent:1,
 arr: [{
 images: 'images/1.jpg'
 },
 {
 images: 'images/5.jpg'
 },
 {
 images: 'images/3.jpg'
 },
 {
 images: 'images/4.jpg'
 }
 ]
 indicatorDots: true,
 autoplay: true,
 interval: 2000,
 duration: 1000,
 circular: true,
 beforeColor: "white",//指示点颜色 
 afterColor: "coral",//当前选中的指示点颜色 
 previousmargin:'30px',//前边距
 nextmargin:'30px',//后边距
 
 },
 
 //轮播图的切换事件 
 swiperChange: function (e) {
 console.log(e.detail.current);
 this.setData({
 swiperCurrent: e.detail.current //获取当前轮播图片的下标
 })
 },
 //滑动图片切换 
 chuangEvent: function (e) { 
 this.setData({
 swiperCurrent: e.currentTarget.id
 })
 },
})

效果图:

微信小程序使用swiper组件实现层叠轮播图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
cypress测试本地web应用
Jun 01 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 #Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 #Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 #Javascript
浅谈React碰到v-if
Nov 04 #Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 #Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 #Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 #Javascript
You might like
用PHP来计算某个目录大小的方法
2014/04/01 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
php获取根域名方法汇总
2014/10/28 PHP
php自定文件保存session的方法
2014/12/10 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
php实现的双色球算法示例
2017/06/20 PHP
php测试kafka项目示例
2020/02/06 PHP
jquery遍历checkbox介绍
2014/02/21 Javascript
再谈javascript原型继承
2014/11/10 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
python装饰器代替set get方法实例
2019/12/19 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
EJB的角色和三个对象
2015/12/31 面试题
年度献血先进个人事迹材料
2014/02/14 职场文书
采购求职信
2014/03/17 职场文书
人大代表选举标语
2014/10/07 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
收银员岗位职责范本
2015/04/07 职场文书
工作证明书
2015/06/15 职场文书
《海上日出》教学反思
2016/02/23 职场文书