parent
44e3047a9f
commit
b43f9a8acb
@ -0,0 +1,41 @@ |
||||
# you-touchbox |
||||
|
||||
对nvue做了些兼容处理，但还不成熟，nvue下transition失效的问题无法解决，请大佬指点（现阶段不建议在nvue中使用本插件，问题多多，nvue中遇到问题可以反馈，我尽力实现需求） |
||||
|
||||
***所有像素值参数都不要传单位** |
||||
|
||||
***一切计算以`可使用窗口高度`为基准**，即`uni.getSystemInfoSync().windowHeight` |
||||
|
||||
***上拉框盒子高度默认为`可使用窗口高度`**，可以通过`customStyle`属性设置 |
||||
|
||||
**属性** |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| -------------- | :----------------------- | ---------------------------------- | ------------------------------------------------------------ | |
||||
| customStyle | 自定义样式 | String\|Object | -<br />border-radius若要兼容nvue请使用<br />border-top-left-radius，border-top-right-radius分开写 | |
||||
| initTop | 初始top值 | Number\|String\|<br />'min'\|'max' | 默认值为'min'，<br />initTop为首次加载时，上拉框显示的高度，<br />所以一般设置为与maxTop或minTop一致，<br />参数可传百分比，像素值，字符串'min''max'<br />max为与maxTop一致，<br />min为与minTop一致<br />0~1为百分比，大于1为像素值，<br />百分比以可使用窗口高度计算，<br />像素值为可使用窗口的顶部位置往下偏移 | |
||||
| maxTop | 最高top值 | Numbe\|String | 默认为可使用窗口的顶部位置，<br />参数可传百分比和像素值，<br />0~1为百分比，大于1为像素值，<br />百分比以可使用窗口高度计算，<br />像素值为可使用窗口的顶部位置往下偏移 | |
||||
| minTop | 最低top值 | Number\|String | 默认为可用区域50%，<br />参数可传百分比和像素值，<br />0~1为百分比，大于1为像素值，<br />百分比以可使用窗口高度计算，<br />像素值为可使用窗口的底部位置往上的偏移 | |
||||
| auto | 是否开启自动复位 | Boolean | true，开启时松手会自动复位到最高最低状态 | |
||||
| limit | 是否开启滑动范围限制 | Boolean | true，开启时滑动范围不可超过maxTop和minTop | |
||||
| customSafeArea | 自定义navbar、tabbar高度 | Object | 如果使用了自定义navbar和tabbar，可以手动设置安全区域 | |
||||
| h5Top | customSafeArea的属性 | Number | -<br />H5的自定义navbar高度 | |
||||
| mpTop | customSafeArea的属性 | Number\|'menuBtn' | -<br />小程序的自定义navbar高度<br />特殊值字符串menuBtn的效果为微信小程序原生navbar的高度<br /> | |
||||
| bottom | customSafeArea的属性 | Number | -<br />自定义tabbar高度<br />因为H5和小程序的navbar高度不一致才需要分开配置，而tabbar一般是一致的，所以不区分 | |
||||
| zIndex | 上拉框z-index | Number\|String | 100 | |
||||
| disable | 禁用滑动 | Boolean | false | |
||||
|
||||
**事件** |
||||
|
||||
| 事件名 | 说明 | 参数 | |
||||
| -------------- | ------------------------------------------------------------ | -------------------------------- | |
||||
| get-end-detail | 获取滑动结束时top信息对象<br />maxTop：最大高度top<br />minTop：最小高度top<br />curTop：当前高度top | Function({maxTop,minTop,curTop}) | |
||||
|
||||
**方法** |
||||
|
||||
此方法要通过ref手动改调用 |
||||
|
||||
| 方法名 | 说明 | 参数 | |
||||
| --------- | ------------------------------------------------------------ | ----------------- | |
||||
| setBottom | 手动设置上拉框高度，参数值传百分比和像素值（不带单位），<br />百分比以可使用窗口高度计算，<br />像素值为可使用窗口的底部位置往上的偏移 | Function（value） | |
||||
|
||||
@ -0,0 +1,244 @@ |
||||
<template> |
||||
<view class="you-touchbox" :class="{touchend:isTouchEnd}" @touchstart="onTouchStart" |
||||
@touchmove.stop.prevent="onTouchmove" @touchend="onTouchend" |
||||
:style="{top: top + distance + 'px',zIndex,height:maxTop*windowHeight+'px'}"> |
||||
<view class="you-touchbox-content" :style="customStyle" @click.stop.prevent> |
||||
<view class="touch-line-box"> |
||||
<view class="touch-line"></view> |
||||
</view> |
||||
<slot></slot> |
||||
|
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
name: "touchbox", |
||||
props: { |
||||
// 禁用滑动 |
||||
disable: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
zIndex: { |
||||
type: [Number, String], |
||||
default: 100 |
||||
}, |
||||
// 自定义样式 |
||||
customStyle: [String, Object], |
||||
// 自定义安全区域 |
||||
customSafeArea: { |
||||
type: Object, |
||||
default () { |
||||
return { |
||||
h5Top: null, |
||||
wxTop: null, |
||||
bottom: null |
||||
} |
||||
} |
||||
}, |
||||
// 最高top |
||||
maxTop: { |
||||
type: [Number, String], |
||||
default: 1 |
||||
}, |
||||
// 最低top |
||||
minTop: { |
||||
type: [Number, String], |
||||
default: 0.5 |
||||
}, |
||||
// 初始top |
||||
initTop: { |
||||
type: [Number, String], |
||||
default: 'min' |
||||
}, |
||||
// 自动复位 |
||||
auto: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
// 最高最低限制 |
||||
limit: { |
||||
type: Boolean, |
||||
default: true |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
windowHeight: null, // 可使用区域高度 |
||||
windowTop: null, |
||||
touchStartY: null, // 开始滑动时的Y轴坐标 |
||||
top: null, // 上拉框top |
||||
max: null, // maxTop |
||||
min: null, // minTop |
||||
distance: 0, // 滑动距离 |
||||
isTouchEnd: false, // 是否滑动结束Flag |
||||
boundary: null, // 规定盒子复位为最大或最小状态的分界线，默认为最大最小状态的中间 |
||||
startTime: null, // 开始滑动时间 |
||||
}; |
||||
}, |
||||
mounted() { |
||||
let { |
||||
windowHeight, // 可使用窗口高度 |
||||
windowTop // 可使用窗口的顶部位置 |
||||
} = uni.getSystemInfoSync() |
||||
this.windowHeight = windowHeight |
||||
this.windowTop = windowTop |
||||
let { |
||||
h5Top, |
||||
wxTop, |
||||
bottom |
||||
} = this.customSafeArea |
||||
// H5自定义安全区域 |
||||
// #ifndef MP |
||||
if (h5Top) { |
||||
this.windowHeight -= h5Top |
||||
windowTop += h5Top |
||||
} |
||||
// #endif |
||||
if (bottom) this.windowHeight -= bottom |
||||
// 上拉框最大高度top |
||||
if (this.maxTop <= 1) this.max = this.windowHeight * (1 - +this.maxTop) |
||||
else this.max = +this.maxTop |
||||
// 上拉框最小高度top |
||||
if (this.minTop <= 1) this.min = this.windowHeight * (1 - +this.minTop) |
||||
else this.min = this.windowHeight - (+this.minTop) |
||||
// 初始的上拉框top |
||||
if (['min', 'max'].includes(this.initTop)) this.top = this.initTop === 'min' ? this.min : this.max |
||||
else if (this.initTop <= 1) this.top = this.windowHeight * (1 - +this.initTop) |
||||
else this.top = +this.initTop |
||||
// 微信自定义安全区域 |
||||
// #ifdef MP |
||||
if (wxTop) { |
||||
this.max += wxTop === 'menuBtn' ? uni.getMenuButtonBoundingClientRect().bottom + 10 : wxTop |
||||
this.top += wxTop |
||||
} |
||||
// #endif |
||||
// H5自定义安全区域 |
||||
// #ifndef MP |
||||
this.max += windowTop |
||||
this.min += windowTop |
||||
this.top += windowTop |
||||
// #endif |
||||
this.boundary = (this.max + this.min) / 2 // 规定盒子复位为最大或最小状态的分界线，默认为最大最小状态的中间 |
||||
}, |
||||
methods: { |
||||
setBottom(value) { |
||||
if (this.auto) this.isTouchEnd = true |
||||
if (value <= 1) this.top = this.windowHeight * (1 - +value) |
||||
else this.top = (this.windowHeight - +value) |
||||
// #ifndef MP |
||||
this.top += this.windowTop |
||||
// #endif |
||||
}, |
||||
onTouchStart(e) { |
||||
if (this.disable) return |
||||
this.isTouchEnd = false // 关闭滑动结束Flag，作用为是否开启上拉框的过渡效果 |
||||
// #ifndef APP-NVUE |
||||
this.top = e.currentTarget.offsetTop // 手指触碰到上拉框时，将上拉框top设置为上拉框当前的top |
||||
// #endif |
||||
// #ifdef APP-NVUE |
||||
this.touchStartY = e.touches[0].screenY // 此次滑动开始时的Y轴坐标 |
||||
// #endif |
||||
// #ifndef APP-NVUE |
||||
this.touchStartY = e.touches[0].clientY // 此次滑动开始时的Y轴坐标 |
||||
// #endif |
||||
this.startTime = Date.now() // 设置滑动开始时间 |
||||
}, |
||||
onTouchmove(e) { |
||||
if (this.disable) return |
||||
// #ifdef APP-NVUE |
||||
let distance = e.touches[0].screenY - this.touchStartY // 滑动的距离 |
||||
// #endif |
||||
// #ifndef APP-NVUE |
||||
let distance = e.touches[0].clientY - this.touchStartY // 滑动的距离 |
||||
// #endif |
||||
if (this.limit) { // 是否开启高度限制 |
||||
let nowTop = this.top + distance // 此次滑动的上拉框top值 |
||||
if (nowTop < this.max || nowTop > this.min) { |
||||
// 如果滑动时上拉框top小于最大高度top就让上拉框top等于最大高度top |
||||
// 如果滑动时上拉框top大于最小高度top就让上拉框top等于最小高度top |
||||
this.top = nowTop < this.max ? this.max : this.min |
||||
this.distance = 0 // 滑动距离归零 |
||||
// #ifdef APP-NVUE |
||||
this.touchStartY = e.touches[0].screenY // 此次滑动开始时的Y轴坐标 |
||||
// #endif |
||||
// #ifndef APP-NVUE |
||||
this.touchStartY = e.touches[0].clientY // 此次滑动开始时的Y轴坐标 |
||||
// #endif |
||||
return |
||||
} |
||||
} |
||||
this.distance = distance // 更新滑动距离 |
||||
}, |
||||
onTouchend(e) { |
||||
if (this.disable) return |
||||
this.top = this.top + this.distance // 更新上拉框top |
||||
if (this.auto) { // 是否开启自动复位 |
||||
this.isTouchEnd = true // 开启滑动结束Flag |
||||
let time = (Date.now() - this.startTime) / 1000 // 滑动时间为 滑动结束时间 - 滑动开始时间 |
||||
let speed = Math.abs(this.distance) / time // 滑动速度为 滑动距离/滑动时间 |
||||
if (speed > 800) { // 如果速度大于800px/秒 |
||||
this.top = this.distance > 0 ? this.min : this.max // 根据滑动方向设置top的值 |
||||
// return this.distance = 0 // 滑动距离归零 |
||||
} else { |
||||
|
||||
if (this.top < this.boundary) this.top = this.max // 如果上拉框top小于分界线就让上拉框top等于最大高度top |
||||
else this.top = this.min // 如果上拉框top大于分界线就让上拉框top等于最小高度top |
||||
} |
||||
} |
||||
// 滑动结束时top信息 |
||||
this.$emit('get-end-detail', { |
||||
minTop: this.min, |
||||
maxTop: this.max, |
||||
curTop: this.top |
||||
}) |
||||
this.distance = 0 // 滑动距离归零 |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.you-touchbox { |
||||
position: fixed; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
} |
||||
|
||||
.touchend { |
||||
transition-property: top; |
||||
transition-duration: .6s; |
||||
} |
||||
|
||||
.you-touchbox-content { |
||||
/* #ifdef APP-NVUE */ |
||||
flex: 1; |
||||
/* #endif */ |
||||
/* #ifndef APP-NVUE */ |
||||
height: 100%; |
||||
/* #endif */ |
||||
background-color: #fff; |
||||
} |
||||
|
||||
|
||||
.touch-line-box { |
||||
padding: 5px 0 10px; |
||||
/* #ifdef APP-NVUE */ |
||||
align-items: center; |
||||
/* #endif */ |
||||
} |
||||
|
||||
.touch-line { |
||||
/* #ifndef APP-NVUE */ |
||||
margin: 0 auto; |
||||
/* #endif */ |
||||
width: 45px; |
||||
height: 5px; |
||||
border-radius: 25px; |
||||
background: rgba(51, 51, 51, 0.2); |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue