微信小程序使用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获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 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错误、异常处理机制(补充)
2012/05/07 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
javascript 继承实现方法
2009/08/26 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
Python闭包实现计数器的方法
2015/05/05 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
linux环境下Django的安装配置详解
2019/07/22 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
tensorflow多维张量计算实例
2020/02/11 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android