小程序中制作滚动图片的方法与步骤

why 410 2025-06-19 20:40:01

小程序怎么做滚动图片

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

1

2

3

4

5

6

7

<!--pages/test/test.wxml-->

<!-- 组件 -->

<swiper>

  <swiper-item wx:for="{{imgUrls}}">

    <image src=&#39;{{item}}&#39; width="335" height="150" mode=&#39;widthFix&#39; class=&#39;img&#39; />

  </swiper-item>

</swiper>

pages/test/test.js:

1

2

3

4

5

6

7

8

9

10

11

12

13

// pages/test/test.js

Page({

  data: {

    imgUrls:[

      &#39;http://dl.bizhi.sogou.com/images/1440x900/2014/05/14/611368.jpg&#39;,

      &#39;http://dl.bizhi.sogou.com/images/1440x900/2013/10/19/394877.jpg&#39;,                &#39;http://img04.sogoucdn.com/app/a/100520093/ca86e620b9e623ff-d72d635343d5bade-dcf2acda7a45cb44f172db138bdf8d2d.jpg&#39;,

    ]

  },

  //事件处理函数

  toupper:function(){

    console.log("触发了toupper");

  }

})

pages/test/test.wxss:

1

2

3

.img{

 width: 100%;

}

心得:

swiper组件:滑块视图容器。

可以为swiper添加autoplay属性,是之自动播放,例如:autoplay=”true”

swiper组件中使用的是image单标签,而不是双标签(否则报错)。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:生活记录app开发类APP开发的功能分析
下一篇:微信小程序中文字玩出花样之弹幕实现方式探究
相关文章