微信小程序实现一个简单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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
Vue scoped及deep使用方法解析
Aug 01 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
php实现的Captcha验证码类实例
2014/09/22 PHP
PHP中list方法用法示例
2016/12/01 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
Ruby如何进行文件操作
2014/07/17 面试题
精细化工应届生求职信
2013/11/17 职场文书
求职个人评价范文
2014/04/09 职场文书
捐书活动总结
2014/05/04 职场文书
集中采购方案
2014/06/10 职场文书
办理护照工作证明
2014/10/10 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL