微信小程序中swiper-item标签数据的传入方式

why 330 2024-08-20

这篇文章主要介绍了微信小程序 标签传入数据的相关资料,需要的朋友可以参考下

微信小程序 标签传入数据

在中用for循环传入多个成对不同数据时的实现方法。

看下效果图：

image.png

遍历实现方法：wxss省略：

wxml中代码：


1

2

3

4

5

6

7

8

9

10

11

<!--导航部分轮播图-->

<swiper class="navban" indicator-dots="{{indicatorDots}}" interval="{{interval}}" duration="{{duration}}">

    <swiper-item>

      <block wx:for="{{navs}}">

        <view class="navbox">

          <image class="navimg" src="{{item.navimg}}"></image>

          <text class="navtext">{{item.navtext}}</text>

        </view>

       </block>

    </swiper-item> 

</swiper>


相对应js里面的代码：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

var app = getApp()

Page({

 data: {

  navs:[

   { navimg:&#39;/images/i01.png&#39;, navtext:&#39;掌上信息&#39;},

   { navimg:&#39;/images/i02.png&#39;, navtext:&#39;商家&#39;},

   { navimg:&#39;/images/i03.png&#39;, navtext:&#39;抢购&#39;},

   { navimg:&#39;/images/i04.png&#39;, navtext:&#39;抢福利&#39;},

   { navimg:&#39;/images/i05.png&#39;, navtext:&#39;五折卡&#39;},

   { navimg:&#39;/images/i06.png&#39;, navtext:&#39;黑猫活动&#39;},

   { navimg:&#39;/images/i07.png&#39;, navtext:&#39;本地圈&#39;},

   { navimg:&#39;/images/i08.png&#39;, navtext:&#39;顺风车&#39;},

  ],

  indicatorDots: true,

  autoplay: true,

  interval: 2000,

  duration: 1000,

 }

  

})


以上就是本文的全部内容，希望对大家的学习有所帮助。


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

标签：程序 数据 微信小程序 小程序 方法
上一篇:微信小程序里 vidao 达成视频播放与弹幕功能的介绍
下一篇:微信小程序里的图片拖拽开发流程
相关文章

 发表评论

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