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代码最前面，不然无效。
是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18