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

3.3 开发创建投票页面

3.3.7 wx:for列表渲染

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

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

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

js文件里

  data: {

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

  }

wxml

    

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

    

预览效果如下:

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

渲染的结果如下:

《微信小程序开发从入门到实战》学习十九_第1张图片

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

wxml文件中

      

        

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

        

      

    

预览效果如下:

《微信小程序开发从入门到实战》学习十九_第2张图片

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

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

  data: {

    formTitle: '',

    formDesc: '',

    optionList: []

  }

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

    + 添加选项

为按钮添加样式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面板中可以看到逻辑层数据的变化,预览效果如下:

《微信小程序开发从入门到实战》学习十九_第3张图片

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

      

        

        bindinput="onOptionInputChange"

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

      

    

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

    })

  }

预览效果如下:《微信小程序开发从入门到实战》学习十九_第4张图片

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

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

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

你可能感兴趣的:(微信小程序,学习,小程序)