微信小程序实现一个简单swiper代码实例


Posted in Javascript onDecember 30, 2019

这篇文章主要介绍了微信小程序实现一个简单swiper代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

话不多说,上截图

微信小程序实现一个简单swiper代码实例

HTML

<swiper class="swiper-block" previous-margin="70rpx" next-margin="70rpx" current="0" autoplay="true" bindchange="swiperChange" circular="true">
   <block wx:for="{{totalData.banners}}" wx:index="{{index}}" wx:key="bannerList">
    <swiper-item class="swiper-item">
     <image mode="aspectFill" src="{{item.cover}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}" />  <br>     </swiper-item>
   </block>
  </swiper>

css

.swiper-block {
 height: 320rpx;
 width: 100%;
}
 
.swiper-item {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 overflow: unset;
 text-align: center;
}
 
.slide-image {
 height: 230rpx;
 width: 526rpx;
 border-radius: 10rpx;
 box-shadow: 0px 3px 10px 0px rgba(51, 51, 51, 0.3);
 margin: 0 rpx 30rpx;
 z-index: 1;
}
 
.active {
 transform: scale(1.21);
 transition: all 0.2s ease-in 0s;
 z-index: 20;
}

js

swiperChange(e) {
 const that = this;
 that.setData({
  swiperIndex: e.detail.current,
 })
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js的event详解。
Sep 06 Javascript
JS array 数组详解
Mar 22 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
JavaScript switch语句使用方法简介
Dec 30 #Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 #Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 #Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 #jQuery
Vue实现星级评价效果实例详解
Dec 30 #Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 #Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 #Javascript
You might like
百度地图API使用方法详解
2015/08/25 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
layui动态加载多表头的实例
2019/09/05 Javascript
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
利用python 下载bilibili视频
2020/11/13 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
英国日常交易网站:Wowcher
2018/09/04 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
演讲主持词
2014/03/18 职场文书
保护环境倡议书500字
2014/05/19 职场文书
5s标语大全
2014/06/23 职场文书
公司经营目标责任书
2015/01/29 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
教师聘用意向书
2015/05/11 职场文书
学校就业保障协议书
2019/06/24 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server