《微信小程序开发从入门到实战》学习十九

3.3 开发创建投票页面

3.3.7 wx:for列表渲染

接下来为创建的投票页面添加一个“添加选项”的功能。需要用户输入文字，应该使用input组件。头投票的数量是不确定的，面对不确定数量的组件的情况时，可以使用wx:for属性对组件进行列表渲染。

使用wx:for需要在逻辑层用数组类型的变量保存数据。

现在使用wx:for练手，代码如下：

js文件里

  data: {

    array:[{msg:'First Msg'},{msg:'Second Msg'}]

  }

wxml

    <view wx:for="{{array}}">

    {{index}}:{{item.msg}}

    </view>

预览效果如下：

 view组件包含wx:for属性，当array中个数有几个，view组件就渲染几次，index变量获取当前元素的数组下标值，还可以通过item变量直接获取当前元素。

渲染的结果如下：

wx:for可以使用嵌套使用，嵌套后，不能确定item变量和index变量属于父组件还是子组件的数据，可以使用wx:for-item属性和wx:for-index属性为它们进行重命名。九九乘法表嵌套代码如下：

wxml文件中

<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">

      <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">

        <view wx:if="{{i <= j}}">

          {{i}} * {{j}} = {{i*j}}

        </view>

      </view>

    </view>

预览效果如下：

现在开始用列表渲染功能为单位增加一些不确定数量的input组件。

先准备好逻辑层的数据，在data对象中增加一个optionList，用来保存每一个投票 选项的内容。createVote.js文件代码如下：

  data: {

    formTitle: '',

    formDesc: '',

    optionList: []

  }

数组变量初始为空，在界面增加一个“添加选项”的按钮，当单击按钮时，就向数组中插入一个 新的元素。在createVote.wxml文件的textarea组件的下面增加如下代码：

    <view class="btn-add-option" bind:tap="onTapAddOption">+ 添加选项</view>

为按钮添加样式createVote.wxss代码如下:

.btn-add-option {

  font-size: 12pt;

  color: #26AB28;

  padding: 40rpx 0;

}

在JS文件添加按钮的单击事件处理函数:

  onTapAddOption(e) {

    const newOptionList = this.data.optionList //获取当前的optionList

    newOptionList.push('') //在list数组中新增一个空字符串，插入数组最后面

    this.setData({

      optionList: newOptionList //更新data对象中的optionList

    })

  }

每次单击“添加选项”，逻辑层的optionList数组就会增加一个元素，在调试器的AppData面板中可以看到逻辑层数据的变化，预览效果如下：

利用逻辑层的optionList变量,增加input组件。在“添加选项”前添加代码，WXML代码如下：

<view wx:for="{{optionList}}" wx:key="index" class="form-option">

      <view class="form-input-wrapper">

        <input value="{{item}}" class="form-input" placeholder="选项" placeholder-class="form-text-placeholder"

        bindinput="onOptionInputChange"

        data-option-index="{{index}}" />

      </view>

    </view>

（

wxml代码里之前没有wx:key，保存时报错了，“Now you can provide attr wx:key for a wx:for to improve performance.”。

根据微信小程序 消除警告： Now you can provide attr `wx:key` for a `wx:for` to improve performance.-CSDN博客

小程序提示报Now you can provide attr "wx:key" for a "wx:for" to improve performance.-CSDN博客

wx:key：

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容， 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

添加了wx:key，后面成功运行了，开心

）

两个view组件包裹input组件是为了后面实现一些样式，wxss样式代码如下:

.form-option {

  margin-top: 20rpx;

}

.form-input-wrapper {

  color: #333;

  font-size: 12pt;

  border-bottom:1rpx solid #eee;

  padding: 20rpx 0;

}

为实现数据在逻辑层与视图层的双向传递，在JS文件中编写投票选项输入的输入事件处理函数，代码如下：

  onOptionInputChange(e){

    const newOptionList = this.data.optionList //获取当前的optionList

    const changedIndex = e.currentTarget.dataset.optionIndex //获取当前修改的元素的下标

    newOptionList[changedIndex] = e.detail.value //将视图层的数据更新到逻辑层变量中

    this.setData({

      optionList: newOptionList //更新data对象中的optionList

    })

  }

预览效果如下：

获取当前修改的元素的下标：e.currentTarget.dataset.optionIndex

这个值在wxml中input组件中data-option-index属性传入。

如果组件上绑定了事件处理函数，可通过data-开头的属性向事件处理函数传递额外的数据，会保存在event.currentTarget.dataset对象，数据的key的名字是data-属性后面的部分，会将短横线连接的形式改为optionIndex的驼峰式名称。