快捷導(dǎo)航

微信小程序動態(tài)添加和刪除組件的現(xiàn)實

更新時間：2020年02月28日 08:36:21 作者：newland9999

這篇文章主要介紹了微信小程序動態(tài)添加和刪除組件的現(xiàn)實，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、基本思路

1、通過改變數(shù)組長度動態(tài)增刪組件

<block wx:for="{{數(shù)組}}">
 組件
</block>

2、點擊添加按鈕，增加數(shù)組的成員，組件相應(yīng)增加

點擊刪除按鈕，減少數(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)實的文章就介紹到這了,更多相關(guān)小程序動態(tài)添加刪除組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Javscript刪除數(shù)組中指定元素并返回新數(shù)組
把數(shù)組中某個值刪除，并返回新數(shù)組，需要遍歷舊數(shù)組找到要刪除的元素，下面有個不錯的示例，大家可以參考下
2014-03-03
javascript中字符串拼接詳解
字符串拼接是所有程序設(shè)計語言都需要的操作。當(dāng)拼接結(jié)果較長時，如何保證效率就成為一個很重要的問題。本文介紹的是Javascript中的字符串拼接，希望對你有幫助，一起來看。
2014-09-09
JavaScript實現(xiàn)GriwView單列全選(自寫代碼)
在 GridView 里有一系列的 Checkbox ，要實現(xiàn)對其全選或全不選，二網(wǎng)上的都不否和要求，于是我自己寫了JavaScript 代碼，貼出來供大家參考
2013-05-05
innerHTML中標(biāo)簽可以換行的方法匯總
本文給大家分享的是一個在javascript中使用innerhtml輸出的時候如何實現(xiàn)換行的小技巧，其實很簡單，在需要換行的地方加上\即可
2015-08-08
JS寄快遞地址智能解析的實現(xiàn)代碼
這篇文章主要介紹了JS寄快遞地址智能解析,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-07-07
如何使用JavaScript實現(xiàn)無縫滾動自動播放輪播圖效果
這篇文章主要介紹了如何使用JavaScript實現(xiàn)“無縫滾動自動播放”輪播圖效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-08-08
JS關(guān)鍵字變色實現(xiàn)思路及代碼
JS關(guān)鍵字變色詳細(xì)很多朋友都很想實現(xiàn)吧接下來將執(zhí)行以下幾個步驟：1.替換關(guān)鍵字，對字體變色2.用正則，CSS背景變色;該方法可結(jié)合前臺JS調(diào)用，感興趣的朋友可以參考下，希望可以幫助到你
2013-02-02
Javascript類定義語法,私有成員、受保護(hù)成員、靜態(tài)成員等介紹
JS只是一門支持面向?qū)ο缶幊痰恼Z言，通過OO可以讓我們的代碼組織更加人性化?？墒桥c傳統(tǒng)基與類的面向?qū)幊陶Z言不同它沒有類概念并且沒成員訪問修飾符。這多少會給我們編程工作會帶來一些束縛
2011-12-12
教你如何通過JavaScript讀取元素的樣式
這篇文章主要給大家介紹了關(guān)于如何通過JavaScript讀取元素的樣式,文中通過實例代碼以及圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2022-01-01
JS跨域之window.name實現(xiàn)的跨域數(shù)據(jù)傳輸
這篇文章主要介紹了JS跨域之window.name實現(xiàn)的跨域數(shù)據(jù)傳輸,需要的朋友可以參考下
2022-01-01