微信小程序实现一个简单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代码
Nov 10 Javascript
一些相见恨晚的 JavaScript 技巧
Apr 25 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
javascript创建元素和删除元素实例小结
Jun 19 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
Yii分页用法实例详解
2014/12/04 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
Python创建临时文件和文件夹
2020/08/05 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
优秀医生事迹材料
2014/02/12 职场文书
信息技术教学反思
2014/02/12 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
产品售后服务承诺书
2014/05/21 职场文书
安全口号大全
2014/06/21 职场文书
合作协议书范文
2014/08/20 职场文书
信访工作汇报材料
2014/10/27 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
Linux中各个目录的作用与内容
2022/06/28 Servers
如何利用python实现Simhash算法
2022/06/28 Python