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

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