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