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


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 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
javascript中 try catch用法
Aug 16 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
基于js文件加载优化(详解)
Jan 03 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
vue配置请求本地json数据的方法
2018/04/11 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
python网络编程之文件下载实例分析
2015/05/20 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
中学生社区服务活动报告
2015/02/05 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
优质护理服务心得体会
2016/01/22 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python