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箭头函数真简洁，值得学习。