mui Picker DtPicker 固定内容以及变动内容Picker 不同情况下的应用 提高效率
目的是:
保证不同的Picker只创建一次,多次创建Picker系统不会自己销毁,X掉一个之后后面可能会出现下一个。
保证实现需求的情况下,优化代码,提高效率。
1.如果picker中的内容为定值
var wnddir = [{
text: "顺风",
value: 0
}, {
text: "逆风",
value: 1
}];
var wnddirPicker = new $.PopPicker();----生成picker
wnddirPicker.setData(//装载值
wnddir
);
var showWnddirPicker = document.getElementById('wnddir');
showWnddirPicker.addEventListener('tap', function(event) {//点击事件
wnddirPicker.show(function(items) {
showWnddirPicker.value = items[0].text;//展示内容
//此处可以写picker选中值所触发的其它情况
});
}, false);
2.如果多个时间框Picker
var days = $(".time");//如果一个界面多个时间框 直接控制所有时间框
days.each(function(i, day) {
day.addEventListener('tap', function() {
var _self = this;
var id = this.getAttribute('id');
if(_self.picker) {//如果picker已经存在
_self.picker.show(function(rs) {
document.getElementById(id).value = rs.text;
});
} else {//picker不存在
var optionsJson = this.getAttribute('data-options') || '{}';
var options = JSON.parse(optionsJson);
_self.picker = new $.DtPicker(options);
_self.picker.show(function(rs) {
document.getElementById(id).value = rs.text;
});
}
}, false);
});
3.Picker中内容会变化的情况
var sectnmtmPicker = new $.PopPicker();
showSectnmtmPicker.addEventListener('tap', function(event) {
rvsecttm = [];//此处是全局变量
for(var i = 0; i < __rsvcttm.length; i++) {//__rsvcttm为全局变量(就是会变化的值)此处也考虑了进程问题, 如果在rvsecttm的赋值放在外面,可能会先走赋值,后查到__rsvcttm的值,导致Picker中没有值,所以放在点击事件中
var a = {
value: __rsvcttm[i].testno,
text: __rsvcttm[i].testno
}
rvsecttm.push(a);
};
sectnmtmPicker.setData(
rvsecttm
);
sectnmtmPicker.show(function(items) {
showSectnmtmPicker.value = items[0].text;
});
}, false);
mui Picker DtPicker 固定内容以及变动内容Picker 不同情况下的应用 提高效率的更多相关文章
- View页面内容的旋转,在某些情况下可替代屏幕旋转使用
这个是在做小秘书的体重曲线图的时候用到的,横排的时候可以多显示些内容,可是由于很多未知的冲突导至屏幕旋转起来非常麻烦,可用用旋转页面的内容来达到旋转屏幕的效果. 代码如下: //旋转90度 CGAff ...
- table表格宽度固定,同时td内容过长也不会被撑开
table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}
- 解决:mui 的 选项卡 + 下拉刷新 功能,在其中嵌入 iframe 后,在 iphone 的情况下,iframe 的内容不能滚动,只显示第一屏内容。
我所遇到的情况是,使用 mui 的 选项卡 + 下拉刷新 功能时,其中有2个页面是嵌入了别的网站的页面,而别个几个是通过 ajax 加载本网站的数据.然后 在其中嵌入 iframe 后,在 iphon ...
- java正则匹配 指定内容以外的 内容
今天,遇到一个需要 匹配出 指定内容以外的 内容的需求. 乍一看,需求貌视很简单啊,直接上 非贪婪模式的 双向零宽断言(有的资料上也叫 预搜索.预查.环视lookaround): 比如,我要匹配 串内 ...
- Django之富文本(获取内容,设置内容)
富文本 1.Rich Text Format(RTF) 微软开发的跨平台文档格式,大多数的文字处理软件都能读取和保存RTF文档,其实就是可以添加样式的文档,和HTML有很多相似的地方 图示 2.tin ...
- 【C#】菜单功能,将剪贴板JSON内容或者xml内容直接粘贴为类
VS 2015菜单功能,将剪贴板JSON内容或者xml内容直接粘贴为类
- content内网,会显示内容,没有内容可地址存在就是这个情况
漏洞地址:http://note.youdao.com/memory/?url=http://www.wooyun.org(如需登录,请注册登录) 正文预览的地方会读取URL地址的<meta n ...
- 为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉?
为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉? 就像这样 两个div高度相同,第二个我写了一个1当作 有内容吧,它就下沉了... 奇怪... ...
- 企业架构研究总结(30)——TOGAF架构内容框架之内容元模型(上)
2. 内容元模型(Content Metamodel) 在TOGAF的眼中,企业架构是以一系列架构构建块为基础的,并将目录.矩阵和图形作为其具体展现方式.如果我们把这些表述方式看作为构建块的语法,那么 ...
随机推荐
- 全栈项目|小书架|服务器开发-Koa全局路由实现
什么是路由 路由就是具体的访问路径,指向特定的功能模块.一个api接口是由ip(域名)+端口号+路径组成,例如 :https://www.npmjs.com/package/koa-router就是一 ...
- Spring Cloud Alibaba学习笔记(1) - 整合Spring Cloud Alibaba
Spring Cloud Alibaba从孵化器版本毕业:https://github.com/alibaba/spring-cloud-alibaba,记录一下自己学习Spring Cloud Al ...
- MySQL绿色版mysql-5.7.17-winx64简洁安装教程
1.解压MySQL绿色版,复制my-default.ini,修改名称为my.ini 2. 以下为my.ini文件 # For advice on how to change settings plea ...
- 在我的电脑中删除wps云文档图标
在我的电脑中删除wps云文档图标 右键点击win10左下角选择运行,输入regedit打开注册表后,找到以下注册表路径: HKEY_CURRENT_USER\Software\Microsoft\Wi ...
- vue使用阿里矢量图标
官方注册注册 1.加入购物车 在阿里矢量图标库将想要的图标加入购物车,然后在购物车中将图标添加到项目: 2.下载 到我的项目中,将图标下载到本地 3.解压引入 在vue项目的asset ...
- web框架(1)-搭建开发环境
一.python安装 首先,确认系统安装的Python版本 $ python3 -V Python 3.6.3 未安装python,请转至:python安装 二.安装第三方依赖库 1.异步框架aioh ...
- djangoNotes
学员管理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- Windows 10安装
使用U盘安装操作系统教程 本教程介绍如何使用U盘安装操作系统,以安装Windows 10过程作为举例. 1 获取操作系统iso镜像文件 获取操作系统ISO镜像文件有很多途径,此处介绍从微软官网下载wi ...
- 创建虚拟目录 http://localhost:1001/ 失败,错误: 无法创建网站
使用vs2015打开一个vs2008项目报错了. 最后网上找到的解决方案, 1,打开编辑xxx.csproj文件: 2,找到节点ProjectExtensions注释掉: 3,重新加载就好了.
- 运输层4——TCP可靠运输的工作原理
目录 1. 停止等待协议 写在前面:本文章是针对<计算机网络第七版>的学习笔记 运输层1--运输层协议概述 运输层2--用户数据报协议UDP 运输层3--传输控制协议TCP概述 运输层4- ...