目的是:

保证不同的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 不同情况下的应用 提高效率的更多相关文章

  1. View页面内容的旋转,在某些情况下可替代屏幕旋转使用

    这个是在做小秘书的体重曲线图的时候用到的,横排的时候可以多显示些内容,可是由于很多未知的冲突导至屏幕旋转起来非常麻烦,可用用旋转页面的内容来达到旋转屏幕的效果. 代码如下: //旋转90度 CGAff ...

  2. table表格宽度固定,同时td内容过长也不会被撑开

    table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}

  3. 解决:mui 的 选项卡 + 下拉刷新 功能,在其中嵌入 iframe 后,在 iphone 的情况下,iframe 的内容不能滚动,只显示第一屏内容。

    我所遇到的情况是,使用 mui 的 选项卡 + 下拉刷新 功能时,其中有2个页面是嵌入了别的网站的页面,而别个几个是通过 ajax 加载本网站的数据.然后 在其中嵌入 iframe 后,在 iphon ...

  4. java正则匹配 指定内容以外的 内容

    今天,遇到一个需要 匹配出 指定内容以外的 内容的需求. 乍一看,需求貌视很简单啊,直接上 非贪婪模式的 双向零宽断言(有的资料上也叫 预搜索.预查.环视lookaround): 比如,我要匹配 串内 ...

  5. Django之富文本(获取内容,设置内容)

    富文本 1.Rich Text Format(RTF) 微软开发的跨平台文档格式,大多数的文字处理软件都能读取和保存RTF文档,其实就是可以添加样式的文档,和HTML有很多相似的地方 图示 2.tin ...

  6. 【C#】菜单功能,将剪贴板JSON内容或者xml内容直接粘贴为类

    VS 2015菜单功能,将剪贴板JSON内容或者xml内容直接粘贴为类

  7. content内网,会显示内容,没有内容可地址存在就是这个情况

    漏洞地址:http://note.youdao.com/memory/?url=http://www.wooyun.org(如需登录,请注册登录) 正文预览的地方会读取URL地址的<meta n ...

  8. 为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉?

    为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉? 就像这样 两个div高度相同,第二个我写了一个1当作 有内容吧,它就下沉了... 奇怪... ...

  9. 企业架构研究总结(30)——TOGAF架构内容框架之内容元模型(上)

    2. 内容元模型(Content Metamodel) 在TOGAF的眼中,企业架构是以一系列架构构建块为基础的,并将目录.矩阵和图形作为其具体展现方式.如果我们把这些表述方式看作为构建块的语法,那么 ...

随机推荐

  1. 全栈项目|小书架|服务器开发-Koa全局路由实现

    什么是路由 路由就是具体的访问路径,指向特定的功能模块.一个api接口是由ip(域名)+端口号+路径组成,例如 :https://www.npmjs.com/package/koa-router就是一 ...

  2. Spring Cloud Alibaba学习笔记(1) - 整合Spring Cloud Alibaba

    Spring Cloud Alibaba从孵化器版本毕业:https://github.com/alibaba/spring-cloud-alibaba,记录一下自己学习Spring Cloud Al ...

  3. MySQL绿色版mysql-5.7.17-winx64简洁安装教程

    1.解压MySQL绿色版,复制my-default.ini,修改名称为my.ini 2. 以下为my.ini文件 # For advice on how to change settings plea ...

  4. 在我的电脑中删除wps云文档图标

    在我的电脑中删除wps云文档图标 右键点击win10左下角选择运行,输入regedit打开注册表后,找到以下注册表路径: HKEY_CURRENT_USER\Software\Microsoft\Wi ...

  5. vue使用阿里矢量图标

    官方注册注册 1.加入购物车 在阿里矢量图标库将想要的图标加入购物车,然后在购物车中将图标添加到项目:     2.下载 到我的项目中,将图标下载到本地     3.解压引入 在vue项目的asset ...

  6. web框架(1)-搭建开发环境

    一.python安装 首先,确认系统安装的Python版本 $ python3 -V Python 3.6.3 未安装python,请转至:python安装 二.安装第三方依赖库 1.异步框架aioh ...

  7. djangoNotes

    学员管理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  8. Windows 10安装

    使用U盘安装操作系统教程 本教程介绍如何使用U盘安装操作系统,以安装Windows 10过程作为举例. 1 获取操作系统iso镜像文件 获取操作系统ISO镜像文件有很多途径,此处介绍从微软官网下载wi ...

  9. 创建虚拟目录 http://localhost:1001/ 失败,错误: 无法创建网站

    使用vs2015打开一个vs2008项目报错了. 最后网上找到的解决方案, 1,打开编辑xxx.csproj文件: 2,找到节点ProjectExtensions注释掉: 3,重新加载就好了.

  10. 运输层4——TCP可靠运输的工作原理

    目录 1. 停止等待协议 写在前面:本文章是针对<计算机网络第七版>的学习笔记 运输层1--运输层协议概述 运输层2--用户数据报协议UDP 运输层3--传输控制协议TCP概述 运输层4- ...