微信小程序使用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一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
javascript使用location.search的示例
Nov 05 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
vue权限问题的完美解决方案
May 08 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 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
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
Ext面向对象开发实践(续)
2008/11/18 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
详解VUE中v-bind的基本用法
2017/07/13 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Django中使用Celery的教程详解
2018/08/24 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
三年级数学教学反思
2014/01/31 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android