我是靠谱客的博主 疯狂小馒头,最近开发中收集的这篇文章主要介绍小程序怎么做滚动图片,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

左右滑动可以切换展示图片:

<!--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:

// pages/test/test.js
Page({
  data: {
    imgUrls:[
      'http://dl.bizhi.sogou.com/images/1440x900/2014/05/14/611368.jpg',
      'http://dl.bizhi.sogou.com/images/1440x900/2013/10/19/394877.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单标签,而不是双标签(否则报错)。

推荐:《小程序开发教程》

以上就是小程序怎么做滚动图片的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是疯狂小馒头为你收集整理的小程序怎么做滚动图片的全部内容,希望文章能够帮你解决小程序怎么做滚动图片所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(82)

评论列表共有 0 条评论

立即
投稿
返回
顶部