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 相关文章推荐
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
js跑步算法的实现代码
Dec 04 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 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生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
Python新手实现2048小游戏
2015/03/31 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
Python制作Windows系统服务
2017/03/25 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
北大自主招生自荐信
2013/10/19 职场文书
安全生产先进个人材料
2014/02/06 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
2015年招聘工作总结
2014/12/12 职场文书
评先进个人材料
2014/12/29 职场文书
雷锋的观后感
2015/06/10 职场文书
队列队形口号
2015/12/25 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android