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

why 262 2024-07-23

小程序怎么做滚动图片

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

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小时内删除侵权内容。

上一篇:小程序在附近不显示的原因及解决办法
下一篇:小程序选择代理运营存在的风险分析
相关文章

 发表评论

暂时没有评论,来抢沙发吧~