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

更新时间：2018年12月05日 14:44:37 作者：myloveqiqi

这篇文章主要介绍了微信小程序实现图片滚动效果,结合实例形式分析了微信小程序基于swiper组件的图片滚动效果相关实现技巧与操作注意事项,需要的朋友可以参考下

本文实例讲述了微信小程序实现图片滚动效果。分享给大家供大家参考，具体如下：

效果：左右滑动可以切换展示图片

代码：

<!--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 getElementsByClassName函数
今天在脚本中应用到了根据类名取元素的方法，却对其效率不甚满意。于是，小幅修改了其探测元素类名的方法，提升了约3成的效率.
2010-04-04
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结（附代码）
这篇文章主要介绍了Iphone手机、安卓手机浏览器控制默认缩放大小的方法，通过meta标签中添加属性代码展示控制浏览器的默认缩放，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
2017-08-08
javascript typeof的用法与typeof运算符介绍[详细]
下面是对于typeof运算符的详细介绍跟typeof的一些用法，分析，学习typeof的朋友，看完了，这篇应该能有所收获。
2008-10-10
JS面向对象（3）之Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法
这篇文章主要介绍了JS面向对象（3）之Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法的相关资料,需要的朋友可以参考下
2016-02-02
常用的9个JavaScript图表库详解
本篇文章给详细讲解了9个JavaScript图表库以及用法，需要的朋友参考学习下。
2017-12-12
JS解析XML文件和XML字符串详解
这篇文章主要介绍了JS解析XML文件和XML字符串详解，推荐给大家，有需要的小伙伴可以参考下。
2015-04-04
微信小程序 checkbox使用实例解析
这篇文章主要介绍了微信小程序 checkbox使用实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
JavaScript将当前时间转换成UTC标准时间的方法
这篇文章主要介绍了JavaScript将当前时间转换成UTC标准时间的方法,涉及javascript中Date及toUTCString方法的使用技巧,需要的朋友可以参考下
2015-04-04
JS基于开关思想实现的数组去重功能【案例】
这篇文章主要介绍了JS基于开关思想实现的数组去重功能,简单分析了开关思想的原理,并结合具体实例形式分析了javascript基于开关思想实现数组去重相关操作技巧,需要的朋友可以参考下
2019-02-02
js实现倒计时秒杀效果
这篇文章主要为大家详细介绍了js实现倒计时秒杀效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12