Fork me on GitHub

h-picker移动端滑动单选组件说明

介绍个人实现的 移动端滑动选择效果 组件 h-picker 的使用。

Usage

以基于 vue-cli 构建的单文件系统为示例说明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// in main.js

import Vue from 'vue'
import App from './App.vue'

// 假定你已经将核心文件拷贝到你的 components 文件夹下(到仓库中拷贝即可)
// 为什么还来个假定这么骚的操作? 因为在下不想发 npm 包 ,占用包名, 这类滑动选择组件各大 ui 库都包含
// 本例作为学习参考

import HPicker from '@/components/HPicker' //导入

Vue.use(HPicker) //安装


new Vue({
el: "#app",
render(h){
return h(App)
}
})

in App.vue

1
2
3
4
5
6
7
8
9
10

<template>

<div>

<h-picker :data="list" @change="handleChange"></h-picker>

</div>

</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
export default {
name: 'App',
data(){
return {
list: [
{label: "测试文字项1"},
{label: "测试文字项2"},
{label: "测试文字项3"},
{label: "测试文字项4"},
{label: "测试文字项5"},
{label: "测试文字项6"},
{label: "测试文字项7"},
{label: "测试文字项8"},
{label: "测试文字项9"},
{label: "测试文字项10"},
{label: "测试文字项11"},
{label: "测试文字项12"},
{label: "测试文字项13"},
{label: "测试文字项14"},
{label: "测试文字项15"},
{label: "测试文字项16"},
{label: "测试文字项17"},
{label: "测试文字项18"},
{label: "测试文字项19"},
{label: "测试文字项20"},
]
}
},
methods: {
//选择项变化时触发句柄
handleChange( data , index){
console.log( data , index);
}
}

}

Properties

特性 类型 默认值 可选值 说明
data Array of Object [] - 选项数据,当没有使用作用域插槽自定义每一项的模板内容时,每项的 label 字段是必须的
item-height Number 37 - 每个选择项的高度值,单位为 px
count Number 5 大于1的整数值 选择器可见选项的个数

Events

change

当选项被滑动选择时触发,每次手指离开都会触发。

1
2
3
4
5
6
7
8
9
// ***** 省略其他选项
methods: {
//选择项变化时触发句柄
handleChange( data , index){
console.log( `当前选中项的数据${data}` , `当前选中项的索引值${index}`);
}
}

// ***** 省略其他选项

Slots

default

h-picker 组件中设置了一个默认的作用域插槽,使得你可以对每个选择项的内容进行自定义。

  • 基于 vue 2.5.x 的使用方式
1
2
3
4

<h-picker :data="list">
<div slot-scope="{ data , index }">{{ `自定义选项内容${index}` }}</div>
</h-picker>
  • 基于 vue 2.6.x 的使用方式
1
2
3
4
5
6
7
<h-picker :data="list">

<template v-slot:default="{ data , index }">{{ `自定义选项内容${index}` }}</template>
<!-- or -->
<template #default="{ data , index }">{{ `自定义选项内容${index}` }}</template>

</h-picker>

仓库地址

仓库地址传送

0%