不能因为我曾经在群里说过会JS就让我做小程序啊,奴家做不到啊!
转念一想,人在屋檐下,不得不低头,只能硬着头皮上了!
然后我就去小程序官网下了个所谓的IDE,看了一遍文档,看着还行,毕竟iOS出身,一看就懂!然后过了一个星期,老板夸我学得快,然后就没有然后嘞。。。说好的做小程序呢,UI呢!设计呢!
正当我觉得小程序可以放下的时候,一个群里有人问怎么动态添加删除Input,就像这样上午问一遍,下午问一遍,我看不下去了,就装了一个逼,实在是后悔啊
没办法,自己装的逼,跪着也要装完,只能打开坑爹的IDE,开始写demo
最开始我以为用wx:for循环就可以啦,谁知道写完添加倒是添加的很6,但是删除的时候只能删除最后一个,最后想到了用value属性绑定data,输入数据流向data,实现双向邦定。。。
index.wxml
<view class="">
<!--<block wx:for="{{divList}}" wx:key="*this">-->
<view class="contentView" wx:for="{{divList}}" >
<view class="del" bindtap="del" data-index="{{index}}">删除</view>
<input data-index="{{index}}" class="conteneInput" placeholder="测试数组添加和删除" bindinput="bindKeyInput" value="{{item.content}}"/>
</view>
<!--</block>-->
<view class="add" bindtap="add">添加</view>
</view>
index.wxss
.add{
width: 100%;
height: 30px;
text-align: center;
background-color: rebeccapurple;
margin-top: 10px;
line-height: 30px;
}
.del{
width: 50px;
height: 50px;
background-color: orangered;
}
.conteneInput{
float: left;
}
.contentView{
display: flex;
margin: 10px;
}
index.js
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
divList:[]
},
onLoad: function () {
},
add:function(e){
var arr = this.data.divList;
var obj = {
content:''
}
arr.push(obj)
this.setData({
divList: arr
})
},
del:function(e){
var arr = this.data.divList;
var index = e.currentTarget.dataset.index
arr.splice(index,1)
this.setData({
divList: arr
})
},
bindKeyInput: function(e) {
console.log(e)
var arr = this.data.divList
var obj = arr[e.currentTarget.dataset.index]
obj.content = e.detail.value
this.setData({
divList:arr
})
}
})
实现的效果是这样的
最后小伙儿按照我的代码也实现了他想要的效果,总算装逼成功,不辱使命!
虽然小程序带了一个小字,但是写起来也很费力,JS基础也看了一遍,但是JS的高阶函数搞得我头晕,还有JS的面向对象,好扯啊,慢慢看吧!