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

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

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

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

主要代码如下：

view class=' weui-cell weui-cell _ input ' view class=' weui-cell _ HD ' view class=' weui-label Rui-alignment '文本空间='ensp '出发地/text/view/view class=' weui-cell _ _ BD ' input class=' weui-input ' name=' Beginaddress ' bind input=' input det ' data-obj=' info ' data-item=' Beginaddress ' value=' { { info。Beginaddress } }“占位符=”请输入出发地禁用=' { { info。ispreedtail } } '//view/view wx : for=' { { info。details } } ' wx : key=' key ' class=' ForItemBorder ' view class=' weui-cell weui-cell _ input ' view class=' weui-cell _ HD ' view class=' weui-label Rui-justice '文本空间=' ensp '途径地/text/view/view input class=' weui-input ' id=' place-{ { index } } 绑定输入=' set place '占位符='请输入途径地/input class=' weui-input LCS ' id=' number-{ { index } } ' bind input=' setNumber ' placeholder='里程数(km)'//view/view class=' weui-cell weui-cell _ input ' view class=' weui-cell _ _ HD ' view class=' weui-label Rui-alignment '文本空间='ensp '目的地/text/view/view input class=' weui-input ' name=' destination ' bind input=' input det ' data-obj=' info ' data-item=' destination ' value=' { { info。 目标} }“占位符=”请输入目的地已禁用=' { { info。ispreedtail } } '/input class=' weui-input LCS ' name=' end length ' bind input=' input det ' data-obj=' info ' data-item=' end length ' value=' { { info。结束长度} }“占位符=”里程数(km)“已禁用=”{ { info。ispreedtail } } '//view view class=' weui-cell ' hidden=' { { info。' ispreedtail } } '按钮类型=' primary ' bind tap=' addItem ' style=' width :50%；'增加途径地/button button type=' primary ' bind tap=' remove item ' style=' width :50%；边距-左：5 rpx'删除途径地/按钮/视图因为添加删除的是相同的结构，所以我构造了一个类详述来表示这个视角

/** *详细信息类构造函数* @param {string} placeName途径地* @param {string}数字里程数*/函数细节(地名，数字){这个。地名=地名；this.number=number}函数Info(){ this。详细信息=[]；} Page({ data : { info : } }，init : function(){ let that=this；this.setData({ info: new Info()，})；}，onLoad:函数（选项){这个。init()；}，addItem:函数{ let info=this。数据。信息；info.details.push(新的detail())；这个。setdata({ info : info })；}，removeItem:函数{ let info=this。数据。信息；信息。细节。pop()；这个。setdata({ info : info })；},})这时候，能对视角动态增删了，那么对数据怎么处理，给每个生成的视角添加编号属性，通过编号属性来判断操作的是哪个详述类js。部分代码如下：

设定位置：函数(e){ let index=parsent(e . CurrentTarget。身份证。替换(' place-'，' ')；let place=e . detail。价值；让信息=这个。数据。信息；信息。详情[索引]。placeName=placethis。setdata({ info : info })；}，setNumber:函数(e){ let index=ParSeint(e . current target。身份证。替换(' number-'，' ')；让数字=e .详细信息。价值；让信息=这个。数据。信息；信息。详情[索引]。数字=数字；这个。setdata({ info : info })；},总结

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