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

墨蓝 2021-09-23 07:54 565阅读 0赞

# 前沿 #

我想实现一个动态修改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文件代码：

样式文件代码：

.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;
    }

# 界面效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]: /images/20210923/43120b464adc4e269ffe10de32878ec5.png