for渲染与事件数据保留

前端小组第四次培训2024/3/23

目标

• 了解针对数组的灵活渲染，for循环渲染
• 掌握对输入事件的处理，对输入数据进行保存
• for循环渲染与输入事件配合，定位特定输入框

事件数据保留

我们想要将输入框中输入的数据保留下来，则需对输入事件进行处理。

示例代码

<!-- 改变一下input组件的背景颜色，白色不好找 -->
<input bindinput="saveData" style="background-color: blueviolet;"/>
<text>{{content}}</text>

Page({
  data: {
    content: "nothing"	//创建content，默认内容为nothing
  },
  saveData: function(e) {	//我们的输入事件被抽象为了e事件
    //console.log(this.data.content);	如果不清楚我们输入的内容在何字段可先对e进行控制台打印
    this.setData({	//将输入内容赋值给data中的text，并通知渲染层发生了更改
       content: e.detail.value 
    });
    //this.data.content = e.detail.value;	如果不需要在渲染层更新，直接复制即可
  }
})

for循环渲染

for循环渲染可以针对数组进行渲染，数组有多少元素，我们就渲染几个组件。

想要渲染哪个数组，就用插值表达式插入wx:for=""中即可，索引wx:key=""我们一般用下标index。

这里我们对obj_arr对象数组进行了for循环渲染。obj_arr数组中包含了两个元素，所以渲染出了两个view。

示例代码

<view wx:for="{{obj_arr}}" wx:key="index">
  <text>{{item.xuefen}} {{item.chengji}}</text>
</view>

Page({
  data: {
    obj_arr: [
      {
        xuefen: 2,
        chengji: 80
      },
      {
        xuefen: 4,
        chengji: 90
      }
    ]
  }
})

固定科目数量的for循环渲染与输入成绩保存

<!-- 渲染data中的subjects数组 -->
<view class="cell" wx:for="{{subjects}}" wx:key="index">
    <text>科目{{index+1}}</text>
	<input class="inputsth" type="digit" bindinput="saveXueFen" data-index="{{index}}"/>
	<input class="inputsth1" type="digit" bindinput="saveFenShu" data-index="{{index}}"/>
</view>
<button bind:tap="show">点击输出subjects</button>

.cell {
  display: flex;
  margin-bottom: 10px;	//每个cell元素将在底部余出10px的空间
}

.inputsth {
  background-color: aqua;
}

.inputsth1 {
  background-color: bisque;
}

Page({
  data: {
    subjects: [
      {
        xuefen: 0,
        fenshu: 0
      },
      {
        xuefen: 0,
        fenshu: 0
      },
      {
        xuefen: 0,
        fenshu: 0
      },
      {
        xuefen: 0,
        fenshu: 0
      }
    ]
  },
  show: function() {
    console.log(this.data.subjects);	//控制台打印subjects数组
  },
  saveXueFen: function(e) {
    let i = e.currentTarget.dataset.index;	//获取当前输入目标的下标
    this.data.subjects[i].xuefen = e.detail.value;	//将subjects数组当前下标下的学分改为输入内容
  },
  saveFenShu: function(e) {
    let i = e.currentTarget.dataset.index;	//获取当前输入目标的下标
    this.data.subjects[i].fenshu = e.detail.value;	//将subjects数组当前下标下的分数改为输入内容
  }
})