mui使用总结
2019-01-31 本文已影响0人
热心程序猿黄帅哥
1.事件监听：
事件.png
2、调用时间选择弹窗：
chooseTime(num) {
// 时间选择 num 传0是开始时间，1是结束时间
var _this = this;
var dtPicker = new mui.DtPicker({ type: "date" });
dtPicker.show(function(rs) {
/*
* rs.value 拼合后的 value
* rs.text 拼合后的 text
* rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
* rs.m 月，用法同年
* rs.d 日，用法同年
* rs.h 时，用法同年
* rs.i 分（minutes 的第二个字母），用法同年
*/
if (num == 0) {
_this.$refs.startTime.innerText =
rs.y.value + "-" + rs.m.value + "-" + rs.d.value;
_this.searchCondition.start =
rs.y.value + "-" + rs.m.value + "-" + rs.d.value;
} else if (num == 1) {
_this.$refs.endTime.innerText =
rs.y.value + "-" + rs.m.value + "-" + rs.d.value;
_this.searchCondition.end =
rs.y.value + "-" + rs.m.value + "-" + rs.d.value;
}
/*
* 返回 false 可以阻止选择框的关闭
* return false;
*/
/*
* 释放组件资源，释放后将将不能再操作组件
* 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
* 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
* 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
*/
dtPicker.dispose();
});
},
3、手机端列表向左滑出现删除：
<!DOCTYPE html>
<html lang="en">
<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>mui</title>
<link rel="stylesheet" href="./js/mui/mui.min.css">
<link rel="stylesheet" href="./js/mui/mui.picker.css">
<link rel="stylesheet" href="./js/mui/mui.picker.min.css">
<link rel="stylesheet" href="./js/mui/mui.poppicker.css">
<style>
* {
touch-action: none;
}
#hyx {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="mui-content">
<ul id="OA_task_1" class="mui-table-view">
<li class="mui-table-view-cell">
<div class="mui-slider-right mui-disabled">
<div class="mui-btn mui-btn-red">删除</div>
</div>
<div class="mui-slider-handle">
<div>黄xxx</div>
<div>hyx</div>
</div>
</li>
</ul>
</div>
</div>
<script src="./js/mui/mui.min.js"></script>
<script src="./js/mui/mui.picker.js"></script>
<script src="./js/mui/mui.picker.min.js"></script>
<script src="./js/mui/mui.poppicker.js"></script>
<script>
mui.init();
var btn = document.querySelector(".mui-btn-red");
var oLi = document.querySelector(".mui-table-view-cell");
var handle = document.querySelector(".mui-slider-handle");
btn.onclick = function () {
if (btn.innerText === "删除") {
btn.innerText = "确认删除";
btn.style = "transform: translate(-116px, 0px);";
handle.style = "transform: translate(-116px, 0px);"
} else {
alert("删除成功");
btn.style = "transform: translate(0);";
handle.style = "transform: translate(0);"
btn.innerText = "删除";
}
}
监听向左滑动
oLi.addEventListener("swipeleft", function () {
alert('像左滑动')
});
//监听向右滑动
oLi.addEventListener("swiperight", function () {
btn.innerText = "删除";
console.log("像右滑动")
});
</script>
</body>
</html>
列表.png
左滑点击.png
点击后确定.png
未完待续。。。。
