微信小程序动态修改数据 list展示

前沿

我想实现一个动态修改data内数据的功能，试验了几种方式，感觉下面的这种方式最实用，所以记录一下。方便后面的小伙伴来学习。

代码

js文件代码：

Page({
  data: {
    artlist: []
  },
  /*
  页面加载时候出发的方法
  */
  onLoad: function () {
    for (let i = 0; i < 30; i++) {
      let temp = ''
      for (let a = 0; a < 10; a++) {
        temp = temp + '' + i
      }
      this.data.artlist.push(temp)
    }
    console.log(JSON.stringify(this.data.artlist))
    //下面实现的是动态的赋值跳转
    this.setData({
      artlist: this.data.artlist
    })
  },
  upper: function (e) {
    console.log(e)
  },
  lower: function (e) {
    console.log(e)
  },
  scroll: function (e) {
    console.log(e)

JSON文件代码：

{
  "usingComponents": {},
  "navigationBarTitleText": "小程序列表实现"
}

wxml文件代码：

<view class='content'>
<block wx:for="{{artlist}}">
  <view class='art'>{{item}}</view>
</block>
</view>

样式文件代码：

.art {
  width: 100%;
  margin-top: 10px;
  border: 1px;
  border-radius: 5px;
  padding-left: 5px ;
  background-color: #0c86b642;
}
 
.content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

界面效果