微信小程序使用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使用include/require
Nov 13 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 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
Windows下的PHP5.0详解
2006/11/18 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
python同时替换多个字符串方法示例
2019/09/17 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
python将数组n等分的实例
2019/12/02 Python
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
小学语文教师研修感悟
2015/11/18 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书