微信小程序動態(tài)添加和刪除組件的現(xiàn)實(shí)
一、基本思路
1、通過改變數(shù)組長度動態(tài)增刪組件
<block wx:for="{{數(shù)組}}">
組件
</block>
2、點(diǎn)擊添加按鈕,增加數(shù)組的成員,組件相應(yīng)增加
點(diǎn)擊刪除按鈕,減少數(shù)組的成員,組件相應(yīng)刪除
二、示例
wxml:
<view>
<button bindtap='onTapAdd'>添加input組件</button>
<button bindtap='onTapDel'>刪除Input組件</button>
<block wx:for="{{obj}}" wx:key>
<input value="{{item}}"></input>
</block>
</view>
js:
data: {
obj:[]
},
/***增加組件 */
onTapAdd:function(e){
var temp=this.data.obj;
temp.push(this.data.obj.length);
this.setData({
obj:temp
})
},
/***** 刪除最后一個組件,也可以修改刪除指定組件*/
onTapDel:function(e){
var temp = this.data.obj;
temp.pop(this.data.obj.length);
this.setData({
obj: temp
})
},
PS:微信小程序動態(tài)添加view
//index.html
<button bindtap='clickMe'> 添加</button>
<input type='input' value='{{value}}' placeholder='請輸入' bindblur='getValue'></input>
<view wx:for="{{info}}" wx:key="key">
<view > {{info[index].title}} </view>
</view>
//index.js
data: {
info:[],
value:'',
},
clickMe:function(){
var info = this.data.info;
var title = this.data.title;
var info2 = new Object();
info2.title = title;
info.push(info2);
console.log(info)
this.setData({
info:info
})
},
getValue:function(e){
this.setData({
title:e.detail.value,
})
},
到此這篇關(guān)于微信小程序動態(tài)添加和刪除組件的現(xiàn)實(shí)的文章就介紹到這了,更多相關(guān)小程序動態(tài)添加刪除組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Javascript 實(shí)現(xiàn)全屏滾動實(shí)例代碼
這篇文章主要介紹了Javascript 實(shí)現(xiàn)全屏滾動實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-12-12
深入理解javascript動態(tài)插入技術(shù)
這篇文章介紹了javascript動態(tài)插入技術(shù),有需要的朋友可以參考一下2013-11-11
js利用數(shù)組length屬性清空和截短數(shù)組的小例子
這篇文章主要介紹了js利用數(shù)組length屬性清空和截短數(shù)組的小例子,有需要的朋友可以參考一下2014-01-01
JavaScript Promise與async/await作用詳細(xì)講解
Promise是異步編程的一種解決方案:從語法上講,promise是一個對象,從它可以獲取異步操作的消息;從本意上講,它是承諾,承諾它過一段時間會給你一個結(jié)果2023-01-01
ASP.NET jquery ajax傳遞參數(shù)的實(shí)例
下面小編就為大家?guī)硪黄狝SP.NET jquery ajax傳遞參數(shù)的實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11

