1.事件監(jiān)聽：
事件.png
2、調(diào)用時間選擇彈窗：
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) 后抬纸，可以一直使用咙俩。
* 當前示例，因為內(nèi)容較多湿故，如不進行資原釋放阿趁，在某些設備上會較慢。
* 所以每次用完便立即調(diào)用 dispose 進行釋放坛猪，下次用時再創(chuàng)建新實例脖阵。
*/
dtPicker.dispose();
});
},
3、手機端列表向左滑出現(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 = "確認刪除";
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)聽向左滑動
oLi.addEventListener("swipeleft", function () {
alert('像左滑動')
});
//監(jiān)聽向右滑動
oLi.addEventListener("swiperight", function () {
btn.innerText = "刪除";
console.log("像右滑動")
});
</script>
</body>
</html>
列表.png
左滑點擊.png
點擊后確定.png
未完待續(xù)墅茉。命黔。呜呐。。
