微信小程序动态添加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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
javascript使用canvas实现饼状图效果
Sep 08 Javascript
原生JavaScript实现购物车
Jan 10 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开发者事半功倍的十大技巧小结
2010/04/20 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
js实现表格筛选功能
2017/01/18 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Python实现将xml导入至excel
2015/11/20 Python
Python SQLite3简介
2018/02/22 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
一个C/C++编程面试题
2013/11/10 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
几个Linux面试题笔试题
2016/08/01 面试题
感恩节活动方案
2014/01/27 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
一年级语文教学随笔
2015/08/14 职场文书
python对文档中元素删除,替换操作
2022/04/02 Python