273 lines
6.8 KiB
Vue
273 lines
6.8 KiB
Vue
<template>
|
||
<div ref="pickerView" class="ch-picker-view" @touchstart="touchstart" @touchmove.prevent="touchmove"
|
||
@touchend="touchend">
|
||
|
||
<div class="ch-picker-view__scroll" :style="{
|
||
height: `${_itemHeight * visibleCount}px`,
|
||
'--background': `linear-gradient(to bottom, #fff 0%, transparent ${_itemHeight*(_getMaskTopCount+0.4)}px, transparent ${_itemHeight*(_getMaskTopCount+1-0.4)}px, #fff 100%)`,
|
||
}">
|
||
<div class="ch-picker-view__scroll-masktop" :style="{height:`${_itemHeight * _getMaskTopCount}px`}"></div>
|
||
<div class="ch-picker-view__scroll-maskbottom" :style="{height:`${_itemHeight*_getMaskBottomCount}px`}"></div>
|
||
|
||
<div class="ch-picker-view__scroll-box" :style="{
|
||
marginTop:`${_itemHeight * _getMaskTopCount}px`,
|
||
transform: `translateY(${translateY}px)`,
|
||
}">
|
||
<div class="ch-picker-view__scroll-box-item textHide-span" :style="[_itemStyle]" v-for="(item,index) in column"
|
||
:key="index" @tap="handleColumn(item,index)">
|
||
<template v-if="_fieldsMode==='default'">{{item}}</template>
|
||
<template v-else-if="_fieldsMode==='json'">{{item[_fields.label]}}</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
const screenWidth = uni.getSystemInfoSync().screenWidth
|
||
|
||
export default {
|
||
props: {
|
||
// 列数
|
||
colCount: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
// 列下标
|
||
colIndex: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
// 列数据
|
||
column: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
// 默认值
|
||
defaultIndex: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
// value：数据值 label：数据名
|
||
fields: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
// 单个选项的高度，会覆盖_itemStyle内的height；
|
||
// 单位是px
|
||
itemHeight: {
|
||
type: [String, Number],
|
||
default: 44
|
||
},
|
||
// 单个选项样式
|
||
itemStyle: {
|
||
type: Object,
|
||
default: () => {}
|
||
},
|
||
// 每列中可见选项的数量，最大为5,最小为3
|
||
visibleCount: {
|
||
type: Number,
|
||
default: 5
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
touchStartY: 0, // 触屏起始点y
|
||
deltaY: 0, // 手指位移,
|
||
translateY: 0, // box位移
|
||
isTouching: false, // 正在滑动
|
||
|
||
default: {
|
||
fieldsValue: 'value',
|
||
fieldsLabel: 'label',
|
||
},
|
||
}
|
||
},
|
||
computed: {
|
||
_fields() {
|
||
return {
|
||
value: this.fields.value || this.default.fieldsValue,
|
||
label: this.fields.label || this.default.fieldsLabel,
|
||
}
|
||
},
|
||
// 格式: 默认default 数组json
|
||
_fieldsMode() {
|
||
if (this.column && this.column.length && typeof this.column[0] === 'object') {
|
||
return 'json'
|
||
} else {
|
||
return 'default'
|
||
}
|
||
},
|
||
// 实际单个选项的高度 主要是统一变量类型
|
||
_itemHeight() {
|
||
return typeof this.itemHeight === 'string' ? parseFloat(this.itemHeight) : this.itemHeight
|
||
},
|
||
// 实际单个选项的样式
|
||
_itemStyle() {
|
||
return {
|
||
...this.itemStyle,
|
||
height: `${this._itemHeight}px`,
|
||
lineHeight: `${this._itemHeight}px`,
|
||
}
|
||
},
|
||
// 实际滚动区域内容的高度
|
||
_scrollInnerH() {
|
||
return this._itemHeight * (this.column.length - 1)
|
||
},
|
||
_getMaskTopCount() {
|
||
return Math.floor((this.visibleCount - 1) / 2)
|
||
},
|
||
_getMaskBottomCount() {
|
||
return Math.ceil((this.visibleCount - 1) / 2)
|
||
}
|
||
},
|
||
watch: {
|
||
defaultIndex: {
|
||
handler(nVal, oVal) {
|
||
if (this.isTouching) {
|
||
return
|
||
}
|
||
this.translateY = nVal * this._itemHeight * -1
|
||
},
|
||
immediate: true
|
||
},
|
||
translateY(nVal, oVal) {
|
||
let tIndex = Math.floor(Math.abs(nVal) / this._itemHeight)
|
||
tIndex = tIndex > this.column.length - 1 ? this.column.length - 1 : tIndex
|
||
this.$emit('change', tIndex)
|
||
},
|
||
},
|
||
mounted() {
|
||
// #ifdef H5
|
||
// 监听鼠标滚轮
|
||
this.$refs.pickerView.addEventListener('mousewheel', this.mouseHandle, false)
|
||
// #endif
|
||
},
|
||
methods: {
|
||
// 鼠标滚轮触发 - start
|
||
mouseHandle(e) {
|
||
let clientX = e.clientX
|
||
let rangeWidth1 = screenWidth / this.colCount * (this.colIndex)
|
||
let rangeWidth2 = screenWidth / this.colCount * (this.colIndex + 1)
|
||
if (clientX < rangeWidth1 || clientX >= rangeWidth2) {
|
||
return
|
||
}
|
||
|
||
if (e.target.className === 'ch-picker-mask') {
|
||
return
|
||
}
|
||
|
||
let tTranslateY = this.translateY
|
||
if (e.deltaY > 0) {
|
||
// console.log('向下');
|
||
tTranslateY -= this._itemHeight
|
||
tTranslateY = tTranslateY < this._scrollInnerH * -1 ? this._scrollInnerH * -1 : tTranslateY
|
||
} else {
|
||
// console.log('向上');
|
||
tTranslateY += this._itemHeight
|
||
tTranslateY = tTranslateY > 0 ? 0 : tTranslateY
|
||
}
|
||
this.translateY = tTranslateY
|
||
},
|
||
// 鼠标滚轮触发 - end
|
||
|
||
// 触摸触发 - start
|
||
touchstart(e) {
|
||
this.isTouching = true
|
||
|
||
let tTouche = e.touches[0]
|
||
// console.log('touchstart', tTouche.clientY);
|
||
this.touchStartY = tTouche.clientY
|
||
this.deltaY = 0
|
||
},
|
||
touchmove(e) {
|
||
this.isTouching = true
|
||
|
||
let tTouche = e.touches[0]
|
||
// console.log('touchmove', tTouche.clientY);
|
||
let preDeltaY = this.deltaY
|
||
this.deltaY = tTouche.clientY - this.touchStartY
|
||
let tDiff = this.deltaY - preDeltaY
|
||
this.translateY += tDiff
|
||
},
|
||
touchend(e) {
|
||
// console.log('touchend');
|
||
this.isTouching = false
|
||
|
||
let tTranslateY = 0
|
||
let divisor = this.translateY / this._itemHeight
|
||
|
||
divisor = this.deltaY > 0 ? Math.ceil(divisor) : Math.floor(divisor)
|
||
tTranslateY = divisor * this._itemHeight
|
||
tTranslateY = tTranslateY > 0 ? 0 : tTranslateY
|
||
tTranslateY = tTranslateY < this._scrollInnerH * -1 ? this._scrollInnerH * -1 : tTranslateY
|
||
// console.log(tTranslateY);
|
||
this.translateY = tTranslateY
|
||
},
|
||
// 触摸触发 - end
|
||
handleColumn(item, index) {
|
||
this.translateY += (this.defaultIndex - index) * this._itemHeight
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.ch-picker-view {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.ch-picker-view__scroll {
|
||
position: relative;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
z-index: 1;
|
||
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: var(--background);
|
||
pointer-events: none;
|
||
z-index: 99;
|
||
}
|
||
|
||
.ch-picker-view__scroll-masktop,
|
||
.ch-picker-view__scroll-maskbottom {
|
||
position: absolute;
|
||
width: 100%;
|
||
z-index: 1;
|
||
border: 0 solid transparent;
|
||
border-image: linear-gradient(to right, transparent, #ddd, transparent) 1;
|
||
pointer-events: none;
|
||
z-index: 101;
|
||
}
|
||
|
||
.ch-picker-view__scroll-masktop {
|
||
top: 0;
|
||
border-bottom-width: 1px;
|
||
}
|
||
|
||
.ch-picker-view__scroll-maskbottom {
|
||
bottom: 0;
|
||
border-top-width: 1px;
|
||
}
|
||
|
||
.ch-picker-view__scroll-box {
|
||
transition: all 200ms linear;
|
||
|
||
.ch-picker-view__scroll-box-item {
|
||
padding: 0 10rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.textHide-span {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
word-break: break-all;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
</style> |