微信小程序实现图片滚动效果示例
更新时间：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单标签，而不是双标签（否则报错）。
希望本文所述对大家微信小程序开发有所帮助。
相关文章
Echarts是一款基于JavaScript的数据可视化库,它提供了丰富的图表类型,本文将详细介绍如何使用Echarts来绘制气泡图,并介绍气泡图相关的配置,需要的可以参考下2023-12-12
JavaScript和jQuery获取input框的绝对位置实现方法
下面小编就为大家带来一篇JavaScript和jQuery获取input框的绝对位置实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了如何使用 JavaScript创建待办事项列表HTML的完整信息和教程，文中但是示例代码讲解详细，感兴趣的同学可以动手试一试2022-01-01
js中定义函数的方式有很多种，函数直接量就是其中一种，下面通过本文给大家介绍匿名函数是如何调用的及匿名函数的n中写法，对js匿名函数调用，js匿名函数写法相关知识感兴趣的朋友一起学习吧2016-01-01
onload事件当一个页面或是一张图片加载完成时被触发，在body上不仅可以用onload，而且还支持多个HTML标签.用法如下2013-09-09
这篇文章主要为大家详细介绍了bootstrap paginator分页前后台用法示例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
layui问题之模拟table表格中的选中按钮选中事件的方法
今天小编就为大家分享一篇layui问题之模拟table表格中的选中按钮选中事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
Electron autoUpdater实现Windows安装包自动更新的方法
这篇文章主要介绍了Electron autoUpdater实现Windows安装包自动更新的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要为大家详细介绍了微信小程序实现分享商品海报功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
本文给大家记录的是一次谷歌Chrome浏览器扩展程序的开发过程，非常的细致，有类似开发念头的小伙伴们可以来参考下2016-01-01
最新评论