Hg-parapicker NPM

hg-parapicker

build NPM

移动端的并列选择器，适用于选择并列类型的数据。具有很好的适应性，可以在任何前端框架中使用。

这里是 2.x 的文档，1.x 文档请点击这里。

Demo

点击这里跳转到演示页面，请在移动端打开或者使用浏览器移动端调试工具打开。

Install

yarn 下载：yarn add hg-parapicker
npm 下载：npm install --save hg-parapicker
CND 地址：
- js：https://unpkg.com/hg-parapicker/dist/hg-parapicker.js
- css：https://unpkg.com/hg-parapicker/picker.css

Usage

在 vue 等框架中使用

<template>
  <div @click="select">选择</div>
</template>
<script>
import "hg-parapicker/picker.css";
import ParaPicker from "hg-parapicker";

export default {
  data() {
    return {
      picker: null
    };
  },
  methods: {
    select() {
      this.picker.show();
    }
  },
  mounted() {
    this.picker = new ParaPicker({
      data: data,
      onOk: function(arr) {
        console.log(arr);
      }
    });
  },
  beforeDestroy() {
    if (this.picker) {
      this.picker.destroy();
      this.picker = null;
    }
  }
};
</script>

组件销毁时需要销毁 ParaPicker 实例，防止内存溢出
如果数据是请求来的，实例化写在请求成功后的回调中

在传统页面中使用

<head>
  <link
    rel="stylesheet"
    type="text/css"
    href="https://unpkg.com/hg-parapicker/picker.css"
  />
  <script src="https://unpkg.com/hg-parapicker/dist/hg-parapicker.js"></script>
</head>
<body>
  <div onclick="select(1)">选择</div>
  <script>
    var picker = new ParaPicker({
      data: data, // 符合格式的数组
      onOk: function(arr) {
        console.log(arr);
      }
    });
    window.select = function(number) {
      picker.show();
    };
  </script>
</body>

data 配置项的合法值

data选项接受一个二维数组，数据格式如下

var data = [
  ["平民", "狼人", "预言家", "女巫", "猎人", "白痴"],
  ["存活", "死亡", "吃刀", "票出", "吃毒", "中枪"]
];

如果你需要包含更多的信息，可以将数组的每项转化为对象的形势

var data = [
    [
        {value: '预言家', description: '每晚可查验一名玩家'},
        {value: '狼人', description: '每晚可击杀一名玩家'},
        ...
    ],
    ['存活', '死亡', '吃刀', '票出', '吃毒', '中枪']
]

其中的键名value可以根据实际需要通过配置项valueKey设置。例如你选择了预言家-存活，成功的回调函数中会接收如下形式的数组

[{ value: "预言家", description: "每晚可查验一名玩家" }, "存活"];

调用实例方法 show 呼起选择器，完整案例见这里。

配置项

configuration是一个配置项的对象，可以接受如下选项：

key	value	description
data	Array\<Array>	符合格式的二维数组，必填
onOk	Function	确定后的回调函数，返回一个结果数组，必填
onCancel	Function	点击取消按钮或者背景后的回调函数，选填
valueKey	String	需要展示的数据的键名，默认`value`
title	String	选择器标题，默认为空
sureText	String	确定按钮文本，默认为“确定”
cancelText	String	取消按钮文本，默认为“取消”
a	Number	惯性滚动加速度（正数, 单位 px/(ms * ms)），规定滚动阻力，加速度越小缓冲距离越长，默认 `0.001`
style	Object	包含样式配置的对象

style对象可以接受如下选项：

key	value	description
liHeight	Number	每一个选择栏的高度（px），默认 `40`
btnHeight	Number	按钮栏的高度（px），默认 `44`
btnOffset	String	按钮离边框的距离，默认 `20px`
titleColor	String	选择器标题的字体颜色
okColor	String	选择器确定按钮的字体颜色
cancelColor	String	选择器取消按钮的字体颜色
btnBgColor	String	选择器按钮栏的背景颜色
contentColor	String	选择器选择区域的文字颜色
contentBgColor	String	选择器选择区域的背景颜色
upShadowColor	String	选择器顶部朦层颜色
downShadowColor	String	选择器底部朦层颜色
lineColor	String	选择器分隔线颜色

实例方法

function	param	description
show()	`--`	呼起选择框
hide()	`--`	关闭选择框
set(obj)	obj:Object	设置选择器属性
get(key)	key:String	获取选择框属性
destroy()	`--`	销毁选择器