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


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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 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
PHP Error与Logging函数的深入理解
2013/06/03 PHP
php实现telnet功能示例
2014/04/08 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
JS实现简单打字测试
2020/06/24 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python 装饰器使用详解
2017/07/29 Python
python实现教务管理系统
2018/03/12 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
浅谈python锁与死锁问题
2020/08/14 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
印度服装购物网站:Limeroad
2018/09/26 全球购物
高中毕业生个人自我鉴定
2013/11/24 职场文书
计划生育标语
2014/06/23 职场文书
运动会3000米加油稿
2015/07/21 职场文书
公司员工奖惩制度
2015/08/04 职场文书
python单元测试之pytest的使用
2021/06/07 Python