1
This commit is contained in:
@@ -0,0 +1,837 @@
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- @vue-docgen-ignore-next-line -->
|
||||
<script module="xfs" lang="wxs" src="./xfs.wxs"></script>
|
||||
<!-- #endif -->
|
||||
<script lang="ts">
|
||||
import { checkIsCssUnit, rpx2px, getUid } from "../../core/util/xCoreUtil.uts"
|
||||
import { getDefaultColor, colorAddDeepen } from "../../core/util/xCoreColorUtil.uts"
|
||||
import { xConfig } from "../../config/xConfig.uts"
|
||||
type POSITION_TYPE = "bottom" | "top" | "left" | "right"
|
||||
type POSITION_EVENT = {
|
||||
x : number,
|
||||
y : number,
|
||||
classList : Array<string>
|
||||
}
|
||||
|
||||
/**
|
||||
* @name 浮动面板 FloatDrawer
|
||||
* @description 提供流畅的拖拉阻尼效果，回弹丝滑。右滑关闭逻辑已经实现,但在app体验不好,主要是scoll与事件冲突需要官方优化.
|
||||
* @page /pages/index/float-drawer
|
||||
* @category 反馈组件
|
||||
* @constant 平台兼容
|
||||
* | Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
|
||||
| --- | --- | --- | --- | --- | --- | --- | --- |
|
||||
| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
|
||||
*/
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
_width: 0,
|
||||
_height: 0,
|
||||
status:'close' as 'close'|'open',
|
||||
disabledScrolling:false,
|
||||
actioning:false,
|
||||
diffY:0,
|
||||
first:true,
|
||||
tid:5,
|
||||
_lastTouchY:0,
|
||||
_isTouching:false,
|
||||
_scrollTop:0,
|
||||
_lastScrollTop:0,
|
||||
_topEpsilon:2,
|
||||
_translateY:0,
|
||||
_currentTranslateY:0
|
||||
}
|
||||
},
|
||||
emits: [
|
||||
/**
|
||||
* 关闭时执行
|
||||
*/
|
||||
'close',
|
||||
/**
|
||||
* 打开执行的事件
|
||||
*/
|
||||
'open',
|
||||
/**
|
||||
* 打开前执行
|
||||
*/
|
||||
'beforeOpen',
|
||||
/**
|
||||
* 关闭前执行
|
||||
*/
|
||||
'beforeClose',
|
||||
/**
|
||||
* 高度位置变化时触发这个差值.返回参数evt是个百分比,0%是最低下,100%代表是在最顶部.
|
||||
*/
|
||||
'heightChange',
|
||||
/**
|
||||
* 开始拖动
|
||||
*/
|
||||
'movestart',
|
||||
/**
|
||||
* 结束拖动
|
||||
*/
|
||||
'moveend',
|
||||
/**
|
||||
* 等同v-model:show
|
||||
*/
|
||||
'update:show'],
|
||||
props: {
|
||||
|
||||
/**
|
||||
* 显示可v-model:show双向绑定
|
||||
* 默认是打开还是放置在底部。
|
||||
*/
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 是否仅允许通过标题栏拖动。
|
||||
*/
|
||||
onlyHeader: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
/**
|
||||
* 动画时间
|
||||
*/
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 350
|
||||
},
|
||||
/**
|
||||
* 向上的圆角
|
||||
* 空值时，取全局配置的圆角。
|
||||
*/
|
||||
round: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* 百分比，数字字符或者带单位,
|
||||
* 默认露出的内容高度
|
||||
*/
|
||||
size: {
|
||||
type: String,
|
||||
default: "15%"
|
||||
},
|
||||
/**
|
||||
* 弹层最大的高度值，默认为屏幕的可视高
|
||||
* 提供值时不能为百分比，可以是px,rpx单位数字。如果你不带单位，默认转换为rpx单位。
|
||||
*/
|
||||
maxHeight: {
|
||||
type: String,
|
||||
default: "80%"
|
||||
},
|
||||
/**
|
||||
* 当拖动时，触发打开和关闭时的临界值，单位是px
|
||||
* 如果没有达到此临界值时，将会回弹至原始位置。
|
||||
*/
|
||||
triggerDy: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
/**
|
||||
* 当拖动时，如果已经达到了关闭和打开时的临界值时
|
||||
* 可以继续拖拉时缓动阻尼值
|
||||
*/
|
||||
threshold: {
|
||||
type: Number,
|
||||
default: 0.045
|
||||
},
|
||||
/**
|
||||
* 内容层的背景色
|
||||
*/
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: "white"
|
||||
},
|
||||
/**
|
||||
* 暗黑的背景色,空时，取全局的sheetDarkColor
|
||||
*/
|
||||
darkBgColor: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* 拖动标题栏的横线背景色
|
||||
*/
|
||||
actionColor: {
|
||||
type: String,
|
||||
default: "#888888"
|
||||
},
|
||||
/**
|
||||
* 禁用内部的容器并采用view容器
|
||||
*/
|
||||
disabledScroll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 没有禁用disabledScroll生效
|
||||
* 容器内部使用的类型
|
||||
* scroll :scroll-view
|
||||
* list : list-view
|
||||
*/
|
||||
containerType: {
|
||||
type: String,
|
||||
default: 'scroll'
|
||||
},
|
||||
/**
|
||||
* 是否禁用用户滚动等来触发关闭或者打开。
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 层级
|
||||
*/
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
/**
|
||||
* 控制内容的边跑,有时需要自定布局时非常有用.
|
||||
* 请直接使用style css规则写margin,
|
||||
*/
|
||||
contentMargin: {
|
||||
type: String,
|
||||
default: "0 16px 16px 16px"
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(_newval : boolean) {
|
||||
if (_newval&&this.status == 'close') {
|
||||
this.actioning = false;
|
||||
this.open()
|
||||
this.onEnd()
|
||||
} else if(!_newval&&this.status == 'open') {
|
||||
this.actioning = false;
|
||||
this.close()
|
||||
this.onEnd()
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
computed: {
|
||||
_contentMargin() : string {
|
||||
return this.contentMargin
|
||||
},
|
||||
_show() : boolean {
|
||||
return this.show
|
||||
},
|
||||
_disabled() : boolean {
|
||||
return this.disabled
|
||||
},
|
||||
|
||||
_onlyHeader() : boolean {
|
||||
return this.onlyHeader
|
||||
},
|
||||
_duration() : number {
|
||||
return this.duration
|
||||
},
|
||||
|
||||
_round() : string {
|
||||
let round = this.round;
|
||||
if (round == "") {
|
||||
round = xConfig.drawerRadius
|
||||
}
|
||||
let radius = checkIsCssUnit(round, 'rpx');
|
||||
|
||||
let _r = `${radius} ${radius} 0px 0px`
|
||||
return _r
|
||||
},
|
||||
_size() : number {
|
||||
|
||||
if (this.size == "") {
|
||||
return this._height * 0.8
|
||||
}
|
||||
if (this.size.lastIndexOf('rpx') > -1) {
|
||||
let sz = rpx2px(parseFloat(this.size))
|
||||
return this._height - sz
|
||||
}
|
||||
if (this.size.lastIndexOf('px') > -1) {
|
||||
let sz = parseFloat(this.size)
|
||||
|
||||
return this._height - sz
|
||||
}
|
||||
if (this.size.lastIndexOf('%') > -1) {
|
||||
let sz = parseFloat(this.size) / 100 * this._height
|
||||
|
||||
return this._height - sz
|
||||
}
|
||||
|
||||
let sz = uni.rpx2px(parseFloat(this.size))
|
||||
|
||||
return this._height - sz
|
||||
},
|
||||
|
||||
_maxHeight() : number {
|
||||
if (this.size == "") {
|
||||
return this._height * 0.2
|
||||
}
|
||||
if (this.maxHeight.lastIndexOf('rpx') > -1) {
|
||||
let sz = rpx2px(parseFloat(this.maxHeight))
|
||||
return this._height - sz
|
||||
}
|
||||
if (this.maxHeight.lastIndexOf('px') > -1) {
|
||||
let sz = parseFloat(this.maxHeight)
|
||||
return this._height - sz
|
||||
}
|
||||
if (this.maxHeight.lastIndexOf('%') > -1) {
|
||||
let sz = parseFloat(this.maxHeight) / 100 * this._height
|
||||
|
||||
return this._height - sz
|
||||
}
|
||||
|
||||
let sz = rpx2px(parseFloat(this.maxHeight))
|
||||
return this._height - sz
|
||||
},
|
||||
_bgColor() : string {
|
||||
if (xConfig.dark == 'dark') {
|
||||
if (this.darkBgColor != '') return getDefaultColor(this.darkBgColor)
|
||||
return getDefaultColor(xConfig.sheetDarkColor)
|
||||
}
|
||||
return getDefaultColor(this.bgColor)
|
||||
},
|
||||
_actionColor() : string {
|
||||
return getDefaultColor(this.actionColor)
|
||||
},
|
||||
_animationFun() : string {
|
||||
return xConfig.animationFun
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
let t = this;
|
||||
let yachi = 0
|
||||
// #ifdef APP
|
||||
yachi = 250
|
||||
// #endif
|
||||
|
||||
|
||||
this.tid = setTimeout(function () {
|
||||
let sys = uni.getWindowInfo()
|
||||
t._width = sys.windowWidth
|
||||
t._height = sys.windowHeight;
|
||||
if (t._show) {
|
||||
t.status = 'close'
|
||||
t.open();
|
||||
} else {
|
||||
t.status = 'open'
|
||||
t.close()
|
||||
}
|
||||
}, yachi);
|
||||
},
|
||||
beforeUnmount() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
setOpts(opts){
|
||||
this.status = opts.status;
|
||||
},
|
||||
callEmits(args){
|
||||
if(!args.name) return;
|
||||
if(args.name!='open'&&args.name!='close'){
|
||||
if(args.args!=null&&args.args!=undefined){
|
||||
this.$emit(args.name,args.args)
|
||||
}else{
|
||||
this.$emit(args.name)
|
||||
}
|
||||
}else{
|
||||
if(args.name == 'open'){
|
||||
this.status = 'open';
|
||||
}
|
||||
if(args.name == 'close'){
|
||||
this.status = 'close';
|
||||
}
|
||||
this.onEnd()
|
||||
}
|
||||
},
|
||||
setDisabledScolly(opts){
|
||||
this.disabledScrolling = opts.disabledScolly
|
||||
this._isTouching = opts.isMoving
|
||||
},
|
||||
// #endif
|
||||
|
||||
getCurrentHeightPercentByTranslate(translateY:number) : number {
|
||||
const minY = this._maxHeight
|
||||
const maxY = this._size
|
||||
const total = maxY - minY
|
||||
if (total <= 0) return 0
|
||||
let clamped = translateY
|
||||
if (clamped < minY) clamped = minY
|
||||
if (clamped > maxY) clamped = maxY
|
||||
const percent = (maxY - clamped) / total * 100
|
||||
return percent
|
||||
},
|
||||
setStyleAni() {
|
||||
let t = this;
|
||||
|
||||
try {
|
||||
const xFLoatDrawerRef = this.$refs['xFLoatDrawerRef'] as UniElement|null;
|
||||
if(xFLoatDrawerRef == null) return;
|
||||
let duration = t._duration;
|
||||
if (t.first == true) {
|
||||
duration = 0
|
||||
}
|
||||
if (this.status == 'open') {
|
||||
clearTimeout(this.tid)
|
||||
this.tid = setTimeout(function () {
|
||||
xFLoatDrawerRef.style.setProperty("transition-duration", duration.toString() + 'ms')
|
||||
xFLoatDrawerRef.style.setProperty('transform', `translate(0%,${t._maxHeight}px)`)
|
||||
}, 50);
|
||||
} else if (this.status == 'close') {
|
||||
clearTimeout(this.tid)
|
||||
this.tid = setTimeout(function () {
|
||||
xFLoatDrawerRef.style.setProperty("transition-duration", duration.toString() + 'ms')
|
||||
xFLoatDrawerRef.style.setProperty('transform', `translate(0%,${t._size}px)`)
|
||||
|
||||
}, 50);
|
||||
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
t.first = false;
|
||||
},
|
||||
onEnd(){
|
||||
let _this = this;
|
||||
clearTimeout(this._duration)
|
||||
_this.tid = setTimeout(function() {
|
||||
if (_this.status == 'close') {
|
||||
/**
|
||||
* 关闭时执行
|
||||
*/
|
||||
_this.$emit('close')
|
||||
/**
|
||||
* 等同v-model:show
|
||||
*/
|
||||
_this.$emit('update:show', false)
|
||||
_this.$emit('heightChange', 0)
|
||||
|
||||
} else {
|
||||
/**
|
||||
* 打开执行的事件
|
||||
*/
|
||||
_this.$emit('open')
|
||||
_this.$emit('update:show', true)
|
||||
_this.$emit('heightChange', 100)
|
||||
}
|
||||
|
||||
_this.actioning = false;
|
||||
_this.diffY = 0
|
||||
}, _this._duration);
|
||||
},
|
||||
open(){
|
||||
if (this.actioning) return;
|
||||
|
||||
if (this.status == 'open') return;
|
||||
this.actioning = true;
|
||||
this.status = 'open'
|
||||
/**
|
||||
* 打开前执行
|
||||
*/
|
||||
this.$emit('beforeOpen')
|
||||
this.$emit('heightChange', 100)
|
||||
this.setStyleAni();
|
||||
},
|
||||
close(){
|
||||
if (this.actioning || this.status == 'close') return
|
||||
this.actioning = true;
|
||||
this.status = 'close'
|
||||
|
||||
/**
|
||||
* 关闭前执行
|
||||
*/
|
||||
this.$emit('beforeClose')
|
||||
this.$emit('heightChange', 0)
|
||||
this.setStyleAni();
|
||||
},
|
||||
scrollTouchStart(){
|
||||
if (this.status == 'open') {
|
||||
this.disabledScrolling = false
|
||||
}
|
||||
},
|
||||
headerClickClose(){
|
||||
if(this._isTouching) return;
|
||||
if(this.status == 'open'){
|
||||
this.actioning = false;
|
||||
this.close()
|
||||
}else if(this.status == 'close'){
|
||||
this.actioning = false;
|
||||
this.open()
|
||||
}
|
||||
},
|
||||
diffStart(eventx:number,eventy:number){
|
||||
this._isTouching = true
|
||||
this._lastTouchY = eventy
|
||||
this.diffY = 0
|
||||
let ele = this.$refs['xFLoatDrawerRef'] as UniElement
|
||||
if (this.status == 'open') {
|
||||
this._translateY = eventy - (this._maxHeight)
|
||||
this._currentTranslateY = this._maxHeight
|
||||
} else if (this.status == 'close') {
|
||||
this._translateY = eventy - (this._size)
|
||||
this._currentTranslateY = this._size
|
||||
}
|
||||
|
||||
ele.style.setProperty("transition-duration", '0ms')
|
||||
this.$emit('heightChange', this.getCurrentHeightPercentByTranslate(this._currentTranslateY))
|
||||
},
|
||||
diffMove(eventx:number,eventy:number){
|
||||
if(!this._isTouching) return
|
||||
const dy = eventy - this._lastTouchY
|
||||
this.diffY = dy
|
||||
// 手指向上滑动（内容希望上滚）
|
||||
if (dy < 0) {
|
||||
|
||||
// 允许滚动
|
||||
if (this.status == 'open') this.disabledScrolling = false
|
||||
} else if (dy > 0) {
|
||||
// 手指向下滑（内容希望下滚）。若已在顶部（含回弹阈值），禁用滚动交由外层处理
|
||||
const atTop = this._scrollTop <= this._topEpsilon
|
||||
if (atTop) {
|
||||
if (!this.disabledScrolling) {
|
||||
this.disabledScrolling = true
|
||||
// 切换为外层拖拽时，重置拖拽基线，避免位置跳变
|
||||
const base = this.status == 'open' ? this._maxHeight : this._size
|
||||
this._translateY = eventy - base
|
||||
this._lastTouchY = eventy
|
||||
this._currentTranslateY = base
|
||||
const ele = this.$refs['xFLoatDrawerRef'] as UniElement
|
||||
ele.style.setProperty("transition-duration", '0ms')
|
||||
}
|
||||
} else {
|
||||
if (this.disabledScrolling) this.disabledScrolling = false
|
||||
}
|
||||
}
|
||||
// 拖拽位移与阻尼：
|
||||
const ele = this.$refs['xFLoatDrawerRef'] as UniElement
|
||||
const base = this.status == 'open' ? this._maxHeight : this._size
|
||||
const rawTranslate = eventy - this._translateY
|
||||
let newTranslate = base
|
||||
const minY = this._maxHeight
|
||||
const maxY = this._size
|
||||
if (this.status == 'open') {
|
||||
const atTop = this._scrollTop <= this._topEpsilon
|
||||
if (atTop) {
|
||||
if (dy > 0) {
|
||||
// 向下：在 [minY, maxY] 线性；超过 maxY 才强阻尼
|
||||
if (rawTranslate <= maxY) {
|
||||
newTranslate = Math.max(minY, Math.min(rawTranslate, maxY))
|
||||
} else {
|
||||
const over = rawTranslate - maxY
|
||||
const damp = over * this.threshold
|
||||
newTranslate = maxY + Math.min(this.triggerDy, damp)
|
||||
}
|
||||
} else if (dy < 0) {
|
||||
// 向上：仅越过顶部时强阻尼
|
||||
if (rawTranslate >= minY) {
|
||||
newTranslate = minY
|
||||
} else {
|
||||
const overUp = minY - rawTranslate
|
||||
const dampUp = overUp * this.threshold
|
||||
newTranslate = minY - Math.min(this.triggerDy, dampUp)
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (dy < 0) {
|
||||
// 向上：在 [minY, maxY] 线性；超过 minY 才强阻尼
|
||||
if (rawTranslate >= minY) {
|
||||
newTranslate = Math.max(minY, Math.min(rawTranslate, maxY))
|
||||
} else {
|
||||
const overUp = minY - rawTranslate
|
||||
const dampUp = overUp * this.threshold
|
||||
newTranslate = minY - Math.min(this.triggerDy, dampUp)
|
||||
}
|
||||
} else if (dy > 0) {
|
||||
// 向下：仅越过底部时强阻尼
|
||||
if (rawTranslate <= maxY) {
|
||||
newTranslate = maxY
|
||||
} else {
|
||||
const overDown = rawTranslate - maxY
|
||||
const dampDown = overDown * this.threshold
|
||||
newTranslate = maxY + Math.min(this.triggerDy, dampDown)
|
||||
}
|
||||
}
|
||||
}
|
||||
this._currentTranslateY = newTranslate
|
||||
|
||||
ele.style.setProperty('transform', `translate(0%,${newTranslate}px)`)
|
||||
this.$emit('heightChange', this.getCurrentHeightPercentByTranslate(newTranslate))
|
||||
},
|
||||
diffEnd(eventx:number,eventy:number){
|
||||
this._isTouching = false
|
||||
const ele = this.$refs['xFLoatDrawerRef'] as UniElement
|
||||
const base = this.status == 'open' ? this._maxHeight : this._size
|
||||
const moved = this._currentTranslateY - base
|
||||
|
||||
const absMoved = Math.abs(moved)
|
||||
|
||||
if (absMoved >= this.triggerDy) {
|
||||
if (this.status == 'open' && moved > 0) {
|
||||
this.status = 'close'
|
||||
this.onEnd()
|
||||
}
|
||||
if (this.status == 'close' && moved < 0) {
|
||||
this.status = 'open'
|
||||
this.onEnd()
|
||||
}
|
||||
}
|
||||
// 复位
|
||||
const fuweiBase = this.status == 'open' ? this._maxHeight : this._size
|
||||
ele.style.setProperty("transition-duration", this._duration.toString() + 'ms')
|
||||
ele.style.setProperty('transform', `translate(0%,${fuweiBase}px)`)
|
||||
if (this.status == 'open') {
|
||||
this.$emit('heightChange', 100)
|
||||
} else if (this.status == 'close') {
|
||||
this.$emit('heightChange', 0)
|
||||
}
|
||||
|
||||
this.diffY = 0
|
||||
},
|
||||
scrolltoTop(){
|
||||
this.disabledScrolling = true;
|
||||
// #ifdef APP
|
||||
let el = this.$refs['xFloatScrollRef']! as UniElement;
|
||||
// el.scrollTop = 0
|
||||
// this._scrollTop = 0
|
||||
// this._lastTouchY = 0
|
||||
// #endif
|
||||
console.log('top....')
|
||||
},
|
||||
onscroll(evt:UniScrollEvent){
|
||||
const scrollTop = evt.detail.scrollTop
|
||||
this._lastScrollTop = this._scrollTop
|
||||
this._scrollTop = scrollTop
|
||||
// 在滚动过程中，如果向上滚动，则始终允许滚动
|
||||
if (this._isTouching) {
|
||||
const delta = this._scrollTop - this._lastScrollTop
|
||||
if (delta > 0) {
|
||||
// 内容向上滚动
|
||||
if (this.disabledScrolling) this.disabledScrolling = false
|
||||
} else if (delta < 0) {
|
||||
// 内容向下滚动
|
||||
const atTop = this._scrollTop <= this._topEpsilon
|
||||
if (atTop) {
|
||||
if (!this.disabledScrolling) this.disabledScrolling = true
|
||||
} else {
|
||||
if (this.disabledScrolling) this.disabledScrolling = false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mStart(evt:UniTouchEvent){
|
||||
const x = evt.changedTouches[0].clientX
|
||||
const y = evt.changedTouches[0].clientY
|
||||
this.diffStart(x,y)
|
||||
},
|
||||
mMove(evt:UniTouchEvent){
|
||||
const x = evt.changedTouches[0].clientX
|
||||
const y = evt.changedTouches[0].clientY
|
||||
this.diffMove(x,y)
|
||||
},
|
||||
mEnd(evt:UniTouchEvent){
|
||||
const x = evt.changedTouches[0].clientX
|
||||
const y = evt.changedTouches[0].clientY
|
||||
this.diffEnd(x,y)
|
||||
},
|
||||
// #ifdef WEB
|
||||
mmStart(evt:UniMouseEvent){
|
||||
const x = evt.clientX
|
||||
const y = evt.clientY
|
||||
this.diffStart(x,y)
|
||||
},
|
||||
mmMove(evt:UniMouseEvent){
|
||||
const x = evt.clientX
|
||||
const y = evt.clientY
|
||||
this.diffMove(x,y)
|
||||
},
|
||||
mmEnd(evt:UniMouseEvent){
|
||||
const x = evt.clientX
|
||||
const y = evt.clientY
|
||||
this.diffEnd(x,y)
|
||||
},
|
||||
// #endif
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<!-- @transitionend="onEnd" -->
|
||||
<view
|
||||
ref="xFLoatDrawerRef"
|
||||
class="xFloatDrawerWrapContent"
|
||||
:style="{
|
||||
width:'100%',
|
||||
height:_height+'px',
|
||||
borderRadius:_round,
|
||||
backgroundColor:_bgColor,
|
||||
'transition-timing-function':_animationFun,
|
||||
zIndex:zIndex
|
||||
}"
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
|
||||
@touchstart="xfs.mStart"
|
||||
@touchend="xfs.mEnd"
|
||||
@touchcancel="xfs.mEnd"
|
||||
@touchmove="xfs.mMove"
|
||||
:change:prop="xfs.propObserver"
|
||||
:prop="status"
|
||||
:data-opts="{
|
||||
maxHeight:_maxHeight,size:_size,height:_height,
|
||||
status:status,
|
||||
threshold:threshold,
|
||||
duration:_duration,
|
||||
triggerDy:triggerDy,
|
||||
_scrollDetail_y:_lastScrollTop
|
||||
}"
|
||||
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef APP||H5 -->
|
||||
@touchstart="mStart"
|
||||
@touchmove="mMove"
|
||||
@touchend="mEnd"
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef WEB -->
|
||||
@mousedown="mmStart"
|
||||
@mousemove="mmMove"
|
||||
@mouseup="mmEnd"
|
||||
<!-- #endif -->
|
||||
|
||||
>
|
||||
|
||||
<view class="xFloatDrawerBar">
|
||||
<view @click.stop="headerClickClose" style="height:100%" class="xFloatDrawerBarSop">
|
||||
<view class="xFloatDrawerBarLine"
|
||||
:disable="_disabled"
|
||||
:style="{'background-color':_actionColor,opacity: _disabled?0.5:1}">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="xFLoatViewWrap" :style="{flex:'1',padding:_contentMargin}">
|
||||
<scroll-view
|
||||
ref="xFloatScrollRef"
|
||||
@scrolltoupper="scrolltoTop"
|
||||
@scroll="onscroll"
|
||||
@touchstart="scrollTouchStart"
|
||||
v-if="!disabledScroll&&containerType=='scroll'"
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
:scroll-y="!(status=='close'||disabledScrolling)"
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
:scroll-y="!(status=='close'||disabledScrolling)"
|
||||
<!-- #endif -->
|
||||
:style="{flex:'1'}"
|
||||
:bounces="false">
|
||||
<!--
|
||||
@slot 默认插槽
|
||||
@prop {Boolean} show - 当前是否已显示
|
||||
-->
|
||||
<slot name="default" :show="show"></slot>
|
||||
<view :style="{height:_maxHeight+'px'}"></view>
|
||||
</scroll-view>
|
||||
|
||||
<list-view
|
||||
ref="xFloatScrollRef"
|
||||
@scroll="onscroll"
|
||||
@touchstart="scrollTouchStart"
|
||||
@scrolltoupper="scrolltoTop"
|
||||
v-else-if="!disabledScroll&&containerType=='list'"
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
:direction="status=='close'||disabledScrolling?'none':'vertical'"
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
:scroll-y="!(status=='close'||disabledScrolling)"
|
||||
<!-- #endif -->
|
||||
:style="{flex:'1',margin:_contentMargin}" :bounces="false">
|
||||
<!--
|
||||
@slot 默认插槽
|
||||
@prop {Boolean} show - 当前是否已显示
|
||||
-->
|
||||
<slot name="default" :show="show"></slot>
|
||||
<list-item>
|
||||
<view :style="{height:_maxHeight+'px'}"></view>
|
||||
</list-item>
|
||||
</list-view>
|
||||
|
||||
<view v-else :style="{flex:'1',margin:_contentMargin}">
|
||||
<!--
|
||||
@slot 默认插槽
|
||||
@prop {Boolean} show - 当前是否已显示
|
||||
@prop {Number} height - 容器的高度
|
||||
-->
|
||||
<slot name="default" :show="show" :height="_maxHeight"></slot>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.xFloatDrawerBarSop {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.xFloatDrawerBar {
|
||||
height: 44px;
|
||||
|
||||
/* #ifdef WEB */
|
||||
cursor: grab;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifdef WEB */
|
||||
.xFloatDrawerBar:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
|
||||
.xFloatDrawerBarLine {
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
border-radius: 8px;
|
||||
/* #ifdef WEB */
|
||||
&:not[disable=true]:hover{
|
||||
opacity: 0.5;
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.xFloatDrawerWrapContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* #ifndef APP-HARMONY */
|
||||
transition-duration: 250ms;
|
||||
/* #endif */
|
||||
/* #ifdef APP-HARMONY */
|
||||
transition-duration: 0ms;
|
||||
/* #endif */
|
||||
/* transition-timing-function: cubic-bezier(.18,.89,.32,1); */
|
||||
transition-property: transform;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: translate(0%, 100%);
|
||||
position: fixed;
|
||||
/* z-index: 100; */
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user