slideSelect

功能描述

  1.  该slide_select模块实现了在移动端下拉滑动的时候，实现多选功能，跟点击单独选择,用vue封装一个组件，开发只需要传入对应数据就可以直接引用到项目里面。如需要改变样式可以对应在selection_list.css改变样式，selection_list.js改变html格式;

依赖的模块

依赖vue.js

效果图

快速使用

  1. html代码
  3. <link rel="stylesheet" type="text/css" href="./libs/selection_list.css" />
  5. <div id="app">
  6.   <selection_list :list="list" :num="num"></selection_list>
  7. </div>
  9. <script src="./libs/selection_list.js"></script>
  11. // 引用封装的模块 选择列表
  12. Vue.component('selection_list', window.selection_list);
  14. //初始化vue  apicloud真机模式需要放到下面的{}中执行
  15. initVue();
  17. apiready = function() {
  19. };
  21. function initVue() {
  22.   vm = new Vue({
  23.     el: '#app',
  24.     data: function() {
  25.       return {
  26.         list: [{
  27.           name: '选择1',
  28.           isActive: false
  29.         }, {
  30.           name: '选择2',
  31.           isActive: false
  32.         }, {
  33.           name: '选择3',
  34.           isActive: false
  35.         }, {
  36.           name: '选择4',
  37.           isActive: false
  38.         }, {
  39.           name: '选择5',
  40.           isActive: false
  41.         }, {
  42.           name: '选择6',
  43.           isActive: false
  44.         }], //json格式数据
  45.         num: -1 //初始化选中区域
  46.       }
  47.     },
  48.     mounted: function() {
  50.     },
  51.     methods: {
  53.     }
  54.   })
  55. }

特别说明

  1. 使用本模块需要特别注意    Vue.component引用需要放到js代码最前面，不然无效。