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

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

相关推荐
_Kayo_2 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
chenchihwen3 小时前
大模型应用班-第2课 DeepSeek使用与提示词工程课程重点 学习ollama 安装 用deepseek-r1:1.5b 分析PDF 内容
人工智能·学习
说私域3 小时前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往3 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw3 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
超浪的晨3 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
悠哉悠哉愿意5 小时前
【电赛学习笔记】MaxiCAM 项目实践——与单片机的串口通信
笔记·python·单片机·嵌入式硬件·学习·视觉检测
快乐肚皮5 小时前
ZooKeeper学习专栏(五):Java客户端开发(原生API)详解
学习·zookeeper·java-zookeeper
慕y2745 小时前
Java学习第七十二部分——Zookeeper
java·学习·java-zookeeper
weixin_lynhgworld6 小时前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序