微信小程序使用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之锁定表格栏位
Jun 29 Javascript
语义化 H1 标签
Jan 14 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
浅谈react useEffect闭包的坑
Jun 08 Javascript
JavaScript设计模式之原型模式详情
Jun 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如何透过ODBC来存取数据库
2006/10/09 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
PHP实现懒加载的方法
2015/03/07 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
python设置环境变量的原因和方法
2019/06/24 Python
python实现名片管理器的示例代码
2019/12/17 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
C++是不是类型安全的
2014/02/18 面试题
家长反馈意见及建议
2015/06/03 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers
Java完整实现记事本代码
2022/06/16 Java/Android