真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

微信小程序動態(tài)添加view組件的實例代碼

在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ā)展。

微信小程序動態(tài)添加view組件的實例代碼

其中,里程數(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)站的支持!


分享名稱:微信小程序動態(tài)添加view組件的實例代碼
分享鏈接:http://weahome.cn/article/pdgcpi.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部