|
slideSelect模块demo,vue实现滑动全选,点击单选
[复制链接]
本帖最后由 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>
复制代码
|
本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册
X
|