微信小程序使用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 相关文章推荐
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
js面试题之异步问题的深入理解
Sep 20 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 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Python单元和文档测试实例详解
2019/04/11 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
工程管理造价应届生求职信
2013/11/13 职场文书
信息专业个人的自我评价
2013/12/27 职场文书
社区七一党员活动方案
2014/01/25 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
计划生育责任书
2015/05/09 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
银行求职信怎么写
2019/06/20 职场文书
开网店计划分析
2019/07/30 职场文书