3.3 开发创建投票页面

3.3.8 使用icon图标文件

原来已经实现了投票选项的增加和修改功能，现在还差删除。现在为每一个选项增加删除按钮，可以以通过icon图标组件实现。

icon常用属性如下：

type icon的类型，有success、success_no_circle、info、warn、waiting、cancel、download、search、clear

size icon的大小，如果属性值是number,则以px为单位，基础库2.4.0以后支持传入单位rpx或px

color icon的颜色

在wxml中加入icon图标组件，修改后form-option中的代码如下：

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

<icon type="cancel" bind:tap="onTapDelOption" data-option-index="{{index}}" class="del-btn"/>

<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>

在wxss完善该区域样式的代码如下：

.form-option {

margin-top: 20rpx;

display: flex; /* 设置为flex布局，保持默认的横向布局 */

justify-content: space-between; /* 主轴方向的对齐方式使用space-between */

align-items: center;

}

.form-input-wrapper {

color: #333;

font-size: 12pt;

border-bottom:1rpx solid #eee;

padding: 20rpx 0;

flex: 1; /* 设置扩展到最大程度 */

}

.del-btn{

margin-right: 20rpx; /* 与 右侧input保持一定距离 */

}

在js文件中加入删除事件处理函数代码如下：

onTapDelOption(e){

const delIndex = e.currentTarget.dataset.optionIndex //获取当前删除的元素的下标

const newOptionList = this.data.optionList.filter( //筛选当前数组

(v,i) => i !== delIndex //只要不是要被删除的下标的元素，就保留

)

this.setData({

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

})

},

完成后，预览效果如下所示：

十分开心实现了删除功能。

在上面js文件的代码使用了一个箭头函数：

(v,i) => i !== delIndex

它是下面这个函数的缩写：

(v,i) => {i !== delIndex}

它也可以写成下面的写法：

function(v,i ){rerurn !== delIndex}

所以filter函数里传入了一个匿名函数，对optionList数组的每一个元素都会执行一次，将数组元素的值和下标分别传入函数的第1v、2i个参数中，通过返回true或false，决定是否保留optionList数组中的值。JS箭头函数真简洁，值得学习。