weui在对话框中使⽤picker
最近在⼯作中接到这么⼀个需求。
1、使⽤jquery weui框架。
2、实现点击按钮出现weui对话框，并在对话框中嵌套weui的时间picker。
最初的实现的⽅法如下(代码已删)：
1、直接弹出picker。
2、使⽤jq的append等⽅法追加元素。
3、通过css !important使weui⾃带的css属性⽆效，并调整picker所在位置。
结果：成功实现，但是代码太多，看上去很恶⼼，后续出现 多次渲染元素时，只点击第⼀个按钮有效，第⼆个⽆法正常弹出的bug。
后来的实现⽅法：
1、调⽤modal弹出对话框。
2、动态设置modal的css选择器
3、调⽤picker使其在⾃⼰设置的css选择器上内联显⽰。
这样做完确实很好⽤，但是只点击第⼀次正常显⽰，再点击就⽆法弹出picker，经多次试验后，发现唯⼀的css只能调⽤⼀次内联picker，⽽且⽆法使⽤内置的⽅法关闭picker。
于是我通过时间戳创建了动态css选择器，⽤户选择完时间后，再把选择的数据动态添加到现有的input中。
完整代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="cdn.bootcss/weui/1.1.3/style/weui.min.css">
<link rel="stylesheet" href="cdn.bootcss/jquery-weui/1.2.1/css/jquery-weui.min.css">
<script src="cdn.bootcss/jquery/1.11.0/jquery.min.js"></script>
<script src="cdn.bootcss/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="cdn.bootcss/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="cdn.bootcss/jquery-weui/1.2.1/js/city-picker.min.js"></script>
<style type="text/css">
* {
touch-action: pan-y;
}
</style>
</head>
<body>
<button class="ipt">签到</button>
<input type="text" id="getvalue" readonly="readonly" />
<br />
<button class="ipt2">签退</button>
<input type="text" id="getvalue2" readonly="readonly" />
</body>
<script type="text/javascript">
/
/返回⼀个数组，提供给weui的picker让其在每次弹出默认都显⽰现在的时间。
function initTime() {
var arr = [];
var d = new Date()
var hh = d.getHours()jquery框架使用
var mm = d.getMinutes()
if(mm >= 0 && mm <= 9){
mm = '0' + mm;
}
var ss = d.getSeconds()
if (ss >= 0 && ss <= 9) {
ss = '0' + ss;
}
因为我没到更好的⽅法，⽽且接⼿项⽬时基带的jq组件库就是weui，所以我也就懒得⾃⼰写⼀个picker了，这样更快捷。有条件的情况下，还是建议⾃⼰写⼀个。
最终效果如下：
GIF.gif

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。