微信小程序使用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 CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
js实现无缝滚动特效
Dec 20 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
angularJs中$scope数据序列化的实例
Sep 30 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
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
php 中的closure用法详解
2017/06/12 PHP
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
用js编写留言板
2020/03/17 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
用python写扫雷游戏实例代码分享
2018/05/27 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
python支持多线程的爬虫实例
2019/12/21 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
信息专业大学生自我评价分享
2014/01/17 职场文书
警示教育活动总结
2014/05/05 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
毕业设计致谢词
2015/05/14 职场文书
出生证明格式
2015/06/15 职场文书
mybatis 获取更新记录的id
2022/05/20 Java/Android