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


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 相关文章推荐
用js实现trim()的解决办法
Apr 16 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
Vue双向绑定实现原理与方法详解
May 07 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
DISCUZ 分页代码
2007/01/02 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
AngularJS快速入门
2015/04/02 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python实现的各种排序算法代码
2013/03/04 Python
Python工程师面试必备25条知识点
2018/01/17 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Python实现序列化及csv文件读取
2020/01/19 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
比利时买床:Beter Bed
2017/12/06 全球购物
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
军训个人总结
2015/03/03 职场文书
单位更名证明
2015/06/18 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers