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


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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
微信小程序实现星级评价
Nov 20 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
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
详解 Python 读写XML文件的实例
2017/08/02 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
仓库管理专业个人自我评价范文
2013/11/11 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
学习十八大的心得体会
2014/09/01 职场文书
工作证明格式范文
2015/06/15 职场文书
食堂卫生管理制度
2015/08/04 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏