微信小程序动态添加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 相关文章推荐
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
js获取图片宽高的方法
Nov 25 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
解决vue router组件状态刷新消失的问题
Aug 01 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学习笔记之二 php入门知识
2011/01/12 PHP
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
phpinfo的知识点总结
2019/10/10 PHP
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
Python Paramiko模块的安装与使用详解
2016/11/18 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
python实现控制台打印的方法
2019/01/12 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
写好自荐信的几个要点
2013/12/26 职场文书
护理学专业求职信
2014/06/29 职场文书
社区节水倡议书
2015/04/29 职场文书
工作简报怎么写
2015/07/21 职场文书
2016保送生自荐信范文
2016/01/29 职场文书