weui中的picker使用js进行动态绑定数据问题


Posted in Javascript onNovember 06, 2019

解决方案; picker和Select组件是通过input标签绑定,可以先通过input的父级元素移除input标签,重新插入input标签,最后重新初始化picker或Select组件。

<div class="weui-cell">
        <div class="weui-cell__hd"><label for="time-format" class="weui-label">性别</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input " id="appl_sex" name="appl_sex" type="text" value="">
        </div>
      </div>
<div id="box">
   <input type="text" id='camera' value="前置摄像头"/>
</div>

js代码:

$("#appl_sex").picker({
  title: "请选择",
  cols: [
    {
      textAlign: 'center',
      values: ["1",'2']
    }
  ],
  onChange: function(p, v, dv) {
    console.log(p, v, dv);
  },
  onClose: function(p, v, d) {
    console.log("close");
  }
});
$('#appl_sex').change(function () {
  /*选择设备号后,根据当前设备号设置不同的摄像头选项,具体判断逻辑根据具体的项目而定*/
  var val = $("#appl_sex").val();
  if (val == "1") {
     $("#box").empty();
     $("#box").html("<input type='text' id='camera' value='前置摄像头'/>");
     $("#camera").picker({
       title: "请选择摄像头",
       cols: [
          {
            textAlign: 'center',
            values: ['前置摄像头']
          }
       ]
     });
   } else {
     $("#box").empty();
     $("#box").html("<input type='text' id='camera' value='前置摄像头'/>");
     $("#camera").picker({
       title: "请选择摄像头",
       cols: [
          {
            textAlign: 'center',
            values: ['前置摄像头', '后置摄像头', '前+后摄像头']
          }
       ]
     });
   }
});

ps:weui之Picker的使用教程

这个问题调试了很久,因为调用example.js时没问题,一移开就失效,一度觉得很诡异。

经过多次测试,才发现,是zepto.min.js的次序放错了,应该放到头部。

完整的代码:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>WeUI</title>
  <link rel="stylesheet" href="./weui.css"/>
 <script src="./zepto.min.js"></script>
</head>
<body ontouchstart>
<div class="page">
  <div class="page__bd page__bd_spacing">
    <a href="javascript:;" class="weui-btn weui-btn_default" id="showPicker">单列选择器</a>
  </div>
</div>
<script type="text/javascript">
  $('#showPicker').on('click', function () {
    weui.picker([{
      label: '飞机票',
      value: 0
    }, {
      label: '火车票',
      value: 1
    }, {
      label: '的士票',
      value: 2
    },{
      label: '公交票 (disabled)',
      disabled: true,
      value: 3
    }, {
      label: '其他',
      value: 4
    }], {
      onChange: function (result) {
        console.log(result);
      },
      onConfirm: function (result) {
        console.log(result);
      }
    });
  });
</script>
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  <script src="./weui.min.js"></script>
</body>
</html>

总结

以上所述是小编给大家介绍的weui中的picker使用js进行动态绑定数据问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
简单实现js轮播图效果
Jul 14 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
在vue中阻止浏览器后退的实例
Nov 06 #Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 #Javascript
vue项目强制清除页面缓存的例子
Nov 06 #Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 #Javascript
JS实现随机抽取三人
Nov 06 #Javascript
Node对CommonJS的模块规范
Nov 06 #Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 #Javascript
You might like
php的一些小问题
2010/07/03 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
YII中assets的使用示例
2014/07/31 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
轮播的简单实现方法
2016/07/28 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
django之session与分页(实例讲解)
2017/11/13 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
python drf各类组件的用法和作用
2021/01/12 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
美国钻石商店:Zales
2016/11/20 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
现金出纳岗位职责
2014/03/15 职场文书
个人授权委托书
2014/09/15 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python