1.事件監(jiān)聽：
事件.png
2、調(diào)用時(shí)間選擇彈窗：
chooseTime(num) {
// 時(shí)間選擇 num 傳0是開始時(shí)間，1是結(jié)束時(shí)間
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 時(shí)，用法同年
* rs.i 分（minutes 的第二個(gè)字母），用法同年
*/
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 可以阻止選擇框的關(guān)閉
* return false;
*/
/*
* 釋放組件資源，釋放后將將不能再操作組件
* 通常情況下，不需要示放組件，new DtPicker(options) 后，可以一直使用。
* 當(dāng)前示例，因?yàn)閮?nèi)容較多，如不進(jìn)行資原釋放，在某些設(shè)備上會(huì)較慢。
* 所以每次用完便立即調(diào)用 dispose 進(jìn)行釋放，下次用時(shí)再創(chuàng)建新實(shí)例。
*/
dtPicker.dispose();
});
},
3、手機(jī)端列表向左滑出現(xiàn)刪除：
<!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 = "確認(rèn)刪除";
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 = "刪除";
}
}
監(jiān)聽向左滑動(dòng)
oLi.addEventListener("swipeleft", function () {
alert('像左滑動(dòng)')
});
//監(jiān)聽向右滑動(dòng)
oLi.addEventListener("swiperight", function () {
btn.innerText = "刪除";
console.log("像右滑動(dòng)")
});
</script>
</body>
</html>
列表.png
左滑點(diǎn)擊.png
點(diǎn)擊后確定.png
未完待續(xù)。。。。
