微信小程序实现一个简单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 文本框使用小结
May 22 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
如何制作自己的原生JavaScript路由
May 05 Javascript
Node实现搜索框进行模糊查询
Jun 28 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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
上海无线电三厂简史修改版
2021/03/01 无线电
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
JS实现匀速运动的代码实例
2013/11/29 Javascript
用console.table()调试javascript
2014/09/04 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
深入学习python的yield和generator
2016/03/10 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
Django 再谈一谈json序列化
2020/03/16 Python
Python数据可视化图实现过程详解
2020/06/12 Python
Spy++的使用方法及下载教程
2021/01/29 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
博士学位自我鉴定范文
2013/12/26 职场文书
自动化专业个人求职信范文
2013/12/30 职场文书
《赶海》教学反思
2014/04/20 职场文书
感恩教育活动总结
2014/05/05 职场文书
党员服务承诺书
2014/05/28 职场文书
2014年销售部工作总结
2014/12/01 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android