微信小程序中的列表渲染，动态设置class类 ,style样式，在元素上绑定数据

汉武大帝·

已于 2023-01-06 09:48:23 修改

阅读量2.7k

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序前端

于 2020-03-15 19:06:01 首次发布

本文链接：https://blog.csdn.net/yinge0508/article/details/104883721

版权

16 篇文章 0 订阅

订阅专栏

微信小程序——列表渲染wx:for

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

也可以使用 wx:for-item 可以指定数组当前元素的变量名，

也可以使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

动态设置多个class类：<scroll-view class="show {{enterprise.length>1?'show1':'show2'}}"></scroll-view>

在元素上绑定数据：<view wx:for="{{enterprise}}" data-companyName="{{item.companyZhong}}">{{item.companyZhong}}</view>

<view style="background:{{selected ? 'red' : 'blue'}}" >红色</view>

关注