How to dynamically add content to WeChat mini programs

How to dynamically add content to the WeChat applet: first add a for and loop the view; then input binds an input event, and obtains the index of the view block containing the input; finally, the index value is used to modify the array. Just value.

How to dynamically add content to WeChat applet:

1. wx:for loop view, add one, The content of wx:for is increased by 1, so is the content of the loop using numbers or arrays?

2. The input is looped out, so it is impossible to bind different bindInput events to different inputs. Then only one input event can be bound, and all values ​​must be an array, then they must be obtained. Go to the index of the view block containing the input, and then modify the value in the array through the index value. .

3. When deleting, if the content of the loop is a number, then only the number will be reduced by one, and only the last one will be deleted. Then the content of the loop can only be an array. As long as you get the index value that needs to be deleted, and then delete the value corresponding to the loop content, you are done.

Related learning recommendations: WeChat Mini Program Development Tutorial

Let’s take a look at the effect first:

wxml:

<view class=&#39;add&#39; bindtap=&#39;addInput&#39;>增加</view>
<view class=&#39;box&#39; wx:for=&#39;{{array}}&#39; wx:key=&#39;&#39;>
    <view class=&#39;del&#39; bindtap=&#39;delInput&#39; data-idx=&#39;{{index}}&#39;>删除</view>
    <input type=&#39;text&#39; class=&#39;b-ipt&#39; placeholder=&#39;请输入&#39; data-idx=&#39;{{index}}&#39; value=&#39;{{inputVal[index]}}&#39; bindinput=&#39;getInputVal&#39;/>    
</view>

(1) The array of the loop is an array

(2) The data-idx attribute is added to both deletion and input because both need to use the current index value.

wxss:

.add{
    display: inline-block;
    line-height: 30px;
    padding: 0 12px;
    background: skyblue;
}
.box{
    margin-top: 10px;
    clear: both;
    overflow: hidden;
    padding: 0 15px;
}
.b-ipt{
    overflow: hidden;
    border: 1px solid #ccc;
}
.del{
    width: 40px;
    float: right;
    margin-left: 10px;
}

js:

data: {
    array:[0],//默认显示一个
    inputVal:[]//所有input的内容
},
//获取input的值
getInputVal:function(e){
    var nowIdx=e.currentTarget.dataset.idx;//获取当前索引
    var val=e.detail.value;//获取输入的值
    var oldVal=this.data.inputVal;
    oldVal[nowIdx]=val;//修改对应索引值的内容
    this.setData({
        inputVal:oldVal
    })
},
//添加input
addInput:function(){
    var old=this.data.array;
    old.push(1);//这里不管push什么，只要数组长度增加1就行
    this.setData({
        array: old
    })
},
//删除input
delInput:function(e){
    var nowidx=e.currentTarget.dataset.idx;//当前索引
    var oldInputVal=this.data.inputVal;//所有的input值
    var oldarr=this.data.array;//循环内容
    oldarr.splice(nowidx,1);    //删除当前索引的内容，这样就能删除view了
    oldInputVal.splice(nowidx,1);//view删除了对应的input值也要删掉
    if (oldarr.length < 1) {
        oldarr = [0]  //如果循环内容长度为0即删完了，必须要留一个默认的。这里oldarr只要是数组并且长度为1，里面的值随便是什么
    }
    this.setData({
        array:oldarr,
        inputVal: oldInputVal
    })
}

(1) array[0] means that it needs to be looped once initially, because wx:for loops based on the length of the array. Write the content in the array as you like, as long as the length is 1

(2) If you are worried about getting the index value every time when inputting, which will affect the performance, I suggest that you can put the event of getting the input value Changed from bindinput to bindblur. That's no problem.

Related learning recommendations: Programming video

The above is the detailed content of How to dynamically add content to WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!