微信小程序实现图片滚动效果示例
更新时间：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单标签，而不是双标签（否则报错）。
希望本文所述对大家微信小程序开发有所帮助。
相关文章
这篇文章主要介绍了关于JS中涉及的常用类型转换及运算符表达式 ,包括js中常用类型转换，及常用的运算符表达式，需要的朋友可以参考下2017-07-07
这篇文章主要介绍了前端开发中实现网页或图像水印的六种方法,包括使用CSS背景图、HTML5 Canvas、SVG、图片处理库、HTML DOM元素以及后端生成,每种方法都有其优缺点,适用于不同的场景,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了JavaScript树型数据与一维数组相互转换方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要给大家介绍了关于JavaScript实现页面中录音功能的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要为大家详细介绍了JS实现消灭星星小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这里列出了一些JS重要知识点（不全面，但自己感觉很重要）。彻底理解并掌握这些知识点，对于每个想要深入学习JS的朋友应该都是必须的2011-11-11
这篇文章主要介绍了webpack v4 从dev到prd的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
微信小程序api列表汇总包括网络API,媒体API,文件API ,微信小程序支付流程,位置API,界面API等
这篇文章主要介绍了微信小程序api列表汇总包括网络API,媒体API,文件API ,数据API,位置API,界面API,微信小程序支付流程,微信小程序登录流程等,需要的朋友可以参考下2022-12-12
这篇文章主要给大家介绍了关于封装一个公用Echarts图表组件的3种模板,定义图表公共样式是为了统一同一网站各页面图表的基础样式,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了推荐阅读的js快速判断IE浏览器(兼容IE10与IE11),因为ie11取消了很多低版本的判断，很多js都需要修改了，这里简单介绍下需要的朋友可以参考下2015-12-12
最新评论