slideSelect

功能描述

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

依赖的模块

依赖vue.js

效果图

快速使用

html代码

<link rel="stylesheet" type="text/css" href="./libs/selection_list.css" />

<div id="app">
  <selection_list :list="list" :num="num"></selection_list>
</div>

<script src="./libs/selection_list.js"></script>

// 引用封装的模块 选择列表
Vue.component('selection_list', window.selection_list);

//初始化vue  apicloud真机模式需要放到下面的{}中执行
initVue();

apiready = function() {

};

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: {

    }
  })
}

特别说明

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