在web中,我們動態(tài)添加DOM,可以用jQuery的方法,很簡單。在微信小程序中怎么實現(xiàn)下面這么需求。
目前創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、饒河網(wǎng)站維護等服務(wù),公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
其中,里程數(shù)代表上一行到這一行地方的距離(這個不重要);要實現(xiàn)的就是點擊增加途徑地,就多一行,刪除途徑地,就少一行。
分析:添加的和刪除的是同樣的結(jié)構(gòu),只是數(shù)量不一樣,所以考慮循環(huán),用列表表示,增加就往這個列表push一個,刪除就從列表pop一個。
主要代碼如下:
出 發(fā) 地 途 徑 地 目 的 地
因為添加刪除的是相同的結(jié)構(gòu),所以我構(gòu)造了一個類Detail來表示這個view
/** * Detail類 構(gòu)造函數(shù) * @param {string} placeName 途徑地 * @param {string} number 里程數(shù) */ function Detail(placeName, number) { this.placeName = placeName; this.number = number; } function Info() { this.details = []; } Page({ data: { info: {} }, init: function () { let that = this; this.setData({ info: new Info(), }); }, onLoad: function (options) { this.init(); }, addItem: function (e) { let info = this.data.info; info.details.push(new Detail()); this.setData({ info: info }); }, removeItem: function (e) { let info = this.data.info; info.details.pop(); this.setData({ info: info }); }, })
這時候,能對view動態(tài)增刪了,那么對數(shù)據(jù)怎么處理,給每個生成的view添加id屬性,通過id屬性來判斷操作的是哪個Detail類。js部分代碼如下:
setPlace: function (e) { let index = parseInt(e.currentTarget.id.replace("place-", "")); let place = e.detail.value; let info = this.data.info; info.details[index].placeName = place; this.setData({ info: info }); }, setNumber: function (e) { let index = parseInt(e.currentTarget.id.replace("number-", "")); let number = e.detail.value; let info = this.data.info; info.details[index].number = number; this.setData({ info: info }); },
總結(jié)
以上所述是小編給大家介紹的微信小程序動態(tài)添加view組件的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!