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 相关文章推荐
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 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
建立动态的WML站点(一)
2006/10/09 PHP
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
Date对象格式化函数代码
2010/07/17 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
Django基础三之视图函数的使用方法
2019/07/18 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
python 字典套字典或列表的示例
2019/12/16 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
努力学习演讲稿
2014/05/10 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
2014年学前班工作总结
2014/12/08 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
python 爬取华为应用市场评论
2021/05/29 Python
JS的深浅复制详细
2021/10/16 Javascript
Python pyecharts绘制条形图详解
2022/04/02 Python
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript