微信小程序实现图片滚动效果示例


Posted in Javascript onDecember 05, 2018

本文实例讲述了微信小程序实现图片滚动效果。分享给大家供大家参考,具体如下:

效果:左右滑动可以切换展示图片

代码:

<!--pages/test/test.wxml-->
<!-- 组件 -->
<swiper>
 <swiper-item wx:for="{{imgUrls}}">
  <image src='{{item}}' width="335" height="150" mode='widthFix' class='img' />
 </swiper-item>
</swiper>

pages/test/test.js:

Page({
 data: {
  imgUrls:[
   'https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=8b20fba45e6034a829b7b087fb23656c/14ce36d3d539b60028f67d12eb50352ac65cb75e.jpg',
   'https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=3386e39a49fbfbeddc0c3e7948c0db0e/32fa828ba61ea8d3943606a1950a304e251f587a.jpg',
   'http://img04.sogoucdn.com/app/a/100520093/ca86e620b9e623ff-d72d635343d5bade-dcf2acda7a45cb44f172db138bdf8d2d.jpg',
  ]
 },
 //事件处理函数
 toupper:function(){
  console.log("触发了toupper");
 }
})

pages/test/test.wxss:

.img{
 width: 100%;
}

运行结果:

微信小程序实现图片滚动效果示例

心得:

  • swiper组件:滑块视图容器。
  • 可以为swiper添加autoplay属性,是之自动播放,例如:autoplay=”true”
  • swiper组件中使用的是image单标签,而不是双标签(否则报错)。

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
Echarts.js无法引入问题解决方案
Oct 30 Javascript
详解vue中的computed的this指向问题
Dec 05 #Javascript
使用rollup打包JS的方法步骤
Dec 05 #Javascript
微信小程序入门之广告条实现方法示例
Dec 05 #Javascript
Vue实现本地购物车功能
Dec 05 #Javascript
node和vue实现商城用户地址模块
Dec 05 #Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 #Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 #Javascript
You might like
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
php车辆违章查询数据示例
2016/10/14 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
GreyBox技术总结(转)
2010/11/23 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
javascript打印输出json实例
2013/11/11 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python3读取zip文件信息的方法
2015/05/22 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
计算机专业毕业生求职信
2014/04/30 职场文书
农村婚庆主持词
2015/06/29 职场文书
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs