微信小程序动态添加view组件的实例代码

在web中，我们动态添加DOM，可以用jQuery的方法，很简单。在微信小程序中怎么实现下面这么需求。

目前创新互联公司已为近1000家的企业提供了网站建设、域名、网页空间、绵阳服务器托管、企业网站设计、饶河网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

其中，里程数代表上一行到这一行地方的距离（这个不重要）；要实现的就是点击增加途径地，就多一行，删除途径地，就少一行。

分析：添加的和删除的是同样的结构，只是数量不一样，所以考虑循环，用列表表示，增加就往这个列表push一个，删除就从列表pop一个。

主要代码如下：

因为添加删除的是相同的结构，所以我构造了一个类Detail来表示这个view

/**
 * Detail类 构造函数 
 * @param {string} placeName 途径地
 * @param {string} number 里程数
 */
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动态增删了，那么对数据怎么处理，给每个生成的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
 });
 },

总结

以上所述是小编给大家介绍的微信小程序动态添加view组件的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！

当前名称：微信小程序动态添加view组件的实例代码
转载注明：http://scyanting.com/article/pdgcpi.html

微信小程序动态添加view组件的实例代码

其他资讯