微信小程序实现轮播图效果


Posted in Javascript onSeptember 07, 2017

微信小程序实现轮播图,和网站,APP的效果差不多,代码少,效率高。

先来看看效果图:

微信小程序实现轮播图效果

主要用swiper + swiper-item来实现

<view class='swiper'>滑块视图容器</view>

<!--
 indicator-dots='true' 是否显示指示点 默认 false
 indicator-color:指示点颜色
 indicator-active-color:选中的指示点颜色
 autoplay:是否自动切换 默认:false
 interval:自动切换时间间隔
 duration:滑动动画时长
 vertical 是否改成纵向, 默认 false
 -->

<swiper indicator-dots='true' indicator-color='gray' indicator-active-color='green' autoplay='true' interval='5000' duration='500'>
 <block wx:for="{{imgUrl}}">
  <swiper-item class="item_image">
   <image src='{{item}}' class='swiper_image' mode="aspectFill"></image>
  </swiper-item>
 </block>

</swiper>

一个简单的小案例,轮播图,代码简洁,功能强大。

源码点击下载

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

Javascript 相关文章推荐
js过滤数组重复元素的方法
Sep 05 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 #Javascript
JavaScript+CSS相册特效实例代码
Sep 07 #Javascript
AngularJS 打开新的标签页实现代码
Sep 07 #Javascript
基于Cookie常用操作以及属性介绍
Sep 07 #Javascript
基于require.js的使用(实例讲解)
Sep 07 #Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 #Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 #jQuery
You might like
文件上传的实现
2006/10/09 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
python daemon守护进程实现
2016/08/27 Python
python字符串中的单双引
2017/02/16 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
Python super()方法原理详解
2020/03/31 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
UNIX命令速查表
2012/03/10 面试题
运动会标语
2014/06/21 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸