微信小程序实现一个简单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 相关文章推荐
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
js正则表达式的使用详解
Jul 09 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
JS实现留言板功能
Jun 17 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
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
PHP操作xml代码
2010/06/17 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
动手学习无线电
2021/03/10 无线电
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
python求质数的3种方法
2018/09/28 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Tensorflow 实现释放内存
2020/02/03 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
抽象类和接口的区别
2012/09/19 面试题
土木工程应届生自荐信
2013/09/24 职场文书
毕业生求职简历的自我评价
2013/10/07 职场文书
学生党支部先进事迹
2014/02/04 职场文书
小学运动会开幕词
2016/03/04 职场文书