微信小程序动态添加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 相关文章推荐
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
vue实现前端列表多条件筛选
Oct 26 Javascript
JavaScript实现滚动加载更多
Dec 27 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
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 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
PHP的5个安全措施小结
2012/07/17 PHP
初识Laravel
2014/10/30 PHP
PHP数组相关函数汇总
2015/03/24 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
javascript各种复制代码收集
2008/09/20 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
python学习入门细节知识点
2018/03/29 Python
python实现三次样条插值
2018/12/17 Python
python sqlite的Row对象操作示例
2019/09/11 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
品质主管的岗位职责
2013/12/04 职场文书
校三好学生主要事迹
2014/01/11 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
学校节能减排方案
2014/06/13 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python