WeChat 미니 프로그램에 콘텐츠를 동적으로 추가하는 방법

WeChat 애플릿에 동적으로 콘텐츠를 추가하는 방법: 먼저 for를 추가하고 뷰를 반복한 다음 입력 이벤트를 입력에 바인딩하고 마지막으로 입력을 포함하는 뷰 블록의 인덱스를 가져옵니다. 인덱스 값.

WeChat 애플릿에 동적으로 콘텐츠를 추가하는 방법:

1. wx:for는 보기를 루프하고, 하나를 추가하면 wx:for의 콘텐츠가 1만큼 증가한 다음 루프된 콘텐츠가 루프되어야 합니다. 숫자가 있든 없든 배열은 어떻습니까?

2. 입력이 루프아웃되므로 서로 다른 입력 이벤트를 서로 바인딩할 수 없으며 모든 값이 배열이어야 합니다. 뷰 블록의 인덱스 값으로 배열의 값을 수정합니다. .

3. 삭제 시 루프의 내용이 숫자인 경우 숫자만 1씩 줄어들고 마지막 것만 삭제됩니다. 그러면 루프의 내용은 배열만 될 수 있습니다. 삭제해야 할 인덱스 값을 구한 뒤 루프 내용에 해당하는 값을 삭제하면 끝이다.

관련 학습 권장 사항: WeChat Mini 프로그램 개발 튜토리얼

먼저 효과를 살펴보겠습니다.

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) 루프의 배열은 배열입니다.

(2) 삭제 및 입력이 추가됩니다. data-idx 속성은 현재 인덱스 값이 필요하기 때문입니다.

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]은 wx:for가 배열 길이에 따라 반복되기 때문에 처음에 한 번 반복해야 함을 의미합니다. 길이는 1

이라면 원하는 대로 배열에 내용을 작성하세요. (2) 입력할 때마다 인덱스 값을 얻어야 해서 성능에 영향을 미칠까 걱정된다면 이벤트를 다음과 같이 변경하는 것이 좋습니다. Bindinput에서 Bindblur로 입력 값을 가져옵니다. 그건 문제가 되지 않습니다.

관련 학습 권장 사항: 프로그래밍 비디오

위 내용은 WeChat 미니 프로그램에 콘텐츠를 동적으로 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!