slideSelect模块demo，vue实现滑动全选，点击单选

[复制链接]

发表于 2020-4-13 17:39:30

本帖最后由 Mr@ZhouHeng 于 2022-2-17 18:18 编辑

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>长按多选择效果</title>
<link rel="stylesheet" type="text/css" href="./libs/api.css" />
<link rel="stylesheet" type="text/css" href="./libs/selection_list.css" />
</head>
<body>
<div id="app">
<selection_list :list="list" :num="num"></selection_list>
</div>
</body>
<script src="./libs/api.js"></script>
<script src="./libs/vue.min.js"></script>
<script src="./libs/selection_list.js"></script>
<script>
// 引用封装的模块选择列表
**.**ponent('selection_list', window.selection_list);
//初始化vue apicloud真机模式需要放到下面的{}中
initVue();
apiready = function() {
var header = $api.byId('app');
var headerH = $api.fixStatusBar(header);
};
function initVue() {
vm = new Vue({
el: '#app',
data: function() {
return {
list: [{
name: '选择1',
isActive: false
}, {
name: '选择2',
isActive: false
}, {
name: '选择3',
isActive: false
}, {
name: '选择4',
isActive: false
}, {
name: '选择5',
isActive: false
}, {
name: '选择6',
isActive: false
}], //json格式数据
num: -1 //初始化选中区域
}
},
mounted: function() {
},
methods: {
}
})
}
</script>
</html>