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 相关文章推荐
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
在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
JAVA/JSP学习系列之七
2006/10/09 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
Python输出9*9乘法表的方法
2015/05/25 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
python实现网页自动签到功能
2019/01/21 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
python实现图像全景拼接
2020/03/27 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
盛大笔试题
2016/11/05 面试题
新闻学专业应届生求职信
2013/11/08 职场文书
股权转让意向书
2014/04/01 职场文书
药剂专业求职信
2014/06/20 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
2014年医务科工作总结
2014/12/18 职场文书
python中super()函数的理解与基本使用
2021/08/30 Python
Python装饰器的练习题
2021/11/23 Python