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


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 相关文章推荐
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
微信小程序自定义组件
Aug 16 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
详解ES6中class的实现原理
Oct 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
php实现将Session写入数据库
2015/07/26 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
2013/04/23 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
python解决字典中的值是列表问题的方法
2013/03/04 Python
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python实现翻转数组功能示例
2018/01/12 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
敬老文明号事迹材料
2014/01/16 职场文书
关于建议书的格式范文
2014/05/20 职场文书
户外宣传策划方案
2014/05/25 职场文书
户外活动总结
2015/02/04 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
2015年助残日活动总结
2015/03/27 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
校长新学期致辞
2015/07/30 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书