微信小程序使用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 相关文章推荐
javascript parseInt与Number函数的区别
Jan 21 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
vue2使用keep-alive缓存多层列表页的方法
Sep 21 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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
给Python初学者的一些编程技巧
2015/04/03 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
使用python实现BLAST
2018/02/12 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
什么是Rollback Segment
2013/04/22 面试题
专业销售业务员求职信
2013/11/18 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
办公设备采购方案
2014/03/16 职场文书
实习协议书范本
2014/04/22 职场文书
活动总结书怎么写
2015/05/11 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
Python操作CSV格式文件的方法大全
2021/07/15 Python
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android
Python开发简易五子棋小游戏
2022/05/02 Python