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


Posted in Javascript onMay 23, 2019

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

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

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

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

主要代码如下:

<view class="weui-cell weui-cell_input">
 <view class="weui-cell__hd">
 <view class="weui-label rui-justify">
 <text space="ensp">出 发 地</text>
 </view>
 </view>
 <view class="weui-cell__bd">
 <input class="weui-input" name="beginAddress" bindinput="inputedit" data-obj="info" data-item="beginAddress" value="{{info.beginAddress}}"
 placeholder="请输入出发地" disabled="{{info.isPreDetail}}" />
 </view>
</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-justify">
 <text space="ensp">途 径 地</text>
 </view>
 </view>
 <input class="weui-input" id="place-{{index}}" bindinput="setPlace" placeholder="请输入途径地" />
 <input class="weui-input lcs" id="number-{{index}}" bindinput="setNumber" placeholder="里程数(km)" />
 </view>
</view>
<view class="weui-cell weui-cell_input">
 <view class="weui-cell__hd">
 <view class="weui-label rui-justify">
 <text space="ensp">目 的 地</text>
 </view>
 </view>
 <input class="weui-input" name="destination" bindinput="inputedit" data-obj="info" data-item="destination" value="{{info.destination}}"
 placeholder="请输入目的地" disabled="{{info.isPreDetail}}" />
 <input class="weui-input lcs" name="endLength" bindinput="inputedit" data-obj="info" data-item="endLength" value="{{info.endLength}}"
 placeholder="里程数(km)" disabled="{{info.isPreDetail}}" />
</view>
<view class="weui-cell" hidden="{{info.isPreDetail}}">
 <button type='primary' bindtap='addItem' style='width:50%;'>增加途径地</button>
 <button type='primary' bindtap='removeItem' style='width:50%;margin-left:5rpx;'>
 删除途径地
 </button>
</view>

因为添加删除的是相同的结构,所以我构造了一个类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组件的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 应用类库代码
Jun 02 Javascript
jquery 学习笔记一
Apr 07 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
JavaScript实现简单进度条效果
Mar 25 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 #Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 #Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 #Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 #Javascript
微信小程序开发实现消息推送
Nov 18 #Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 #jQuery
js打开word文档预览操作示例【不是下载】
May 23 #Javascript
You might like
十天学会php之第二天
2006/10/09 PHP
PHPShop存在多个安全漏洞
2006/10/09 PHP
php socket方式提交的post详解
2008/07/19 PHP
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
YII框架常用技巧总结
2019/04/27 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
python能开发游戏吗
2020/06/11 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
求网格中的黑点分布
2013/11/06 面试题
医药个人求职信范文
2014/01/29 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
请假条范文大全
2014/04/10 职场文书
三孔导游词
2015/02/05 职场文书
老人节主持词
2015/07/04 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android