微信小程序使用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 SELECT单选模拟jQuery.select.js
Nov 12 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
JS中的继承操作实例总结
Jun 06 Javascript
利用js实现简易红绿灯
Oct 15 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
微信小程序实现下拉菜单切换效果
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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
PHP之变量、常量学习笔记
2008/03/27 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
PHP的自定义模板引擎
2017/03/24 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
Js数组排序函数sort()介绍
2015/06/08 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
token 机制和实现方式
2020/12/15 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
几道Web/Ajax的面试题
2016/11/05 面试题
教你打造完美的创业计划书
2014/01/06 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
西式婚礼主持词
2014/03/13 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
档案保密承诺书
2014/06/03 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android