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


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(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
JQUERY 浏览器判断实现函数
Aug 20 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
解决vue项目router切换太慢问题
Jul 19 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
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
用pickle存储Python的原生对象方法
2017/04/28 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
python hook监听事件详解
2018/10/25 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
财务主管的岗位职责
2013/12/30 职场文书
客户表扬信范文
2014/01/10 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
财务工作失职检讨书
2014/11/21 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
《青山不老》教学反思
2016/02/22 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
python pyhs2 的安装操作
2021/04/07 Python
Python集合的基础操作
2021/11/01 Python
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server