WeChat applet <swiper-item> tag incoming data-Mini Program Development-php.cn

WeChat applet tag incoming data

不言

Release： 2018-06-27 09:49:03

Original

3991 people have browsed it

This article mainly introduces the relevant information of the WeChat applet tag incoming data. Friends in need can refer to

WeChat applettag incoming data. Data

Implementation method when using a for loop to pass in multiple pairs of different data in .

Look at the rendering:

Traversal implementation method: wxss omitted:

Code in wxml:

<!--导航部分轮播图-->
<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>

Copy after login

Corresponding code in js:

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,
 }
 
})

Copy after login

The above is the entire content of this article, I hope it will help everyone learn Helpful, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

How to use WeChat Mini Program setData

Analysis of WeChat Mini Program template

Introduction to WeChat applet chart plug-in (wx-charts)

# #

The above is the detailed content of WeChat applet tag incoming data. For more information, please follow other related articles on the PHP Chinese website!