微信小程序使用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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
Jquery 设置标题的自动翻转
2009/10/03 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
python设置windows桌面壁纸的实现代码
2013/01/28 Python
python 获取网页编码方式实现代码
2017/03/11 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
对python 自定义协议的方法详解
2019/02/13 Python
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
党员学习新党章思想汇报
2014/10/25 职场文书
超市督导岗位职责
2015/04/10 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
总结一些Java常用的加密算法
2021/06/11 Java/Android
基于angular实现树形二级表格
2021/10/16 Javascript