提交 4914304c 编写于 作者: U ustbhuangyi

scroll.vue add options prop which is totally match the better-scroll options

上级 da80afd3
...@@ -46,9 +46,7 @@ ...@@ -46,9 +46,7 @@
<cube-scroll <cube-scroll
ref="scroll" ref="scroll"
:data="items" :data="items"
:scrollbar="scrollbarObj" :options="scrollOptions"
:pull-down-refresh="pullDownRefreshObj"
:pull-up-load="pullUpLoadObj"
@pulling-down="onPullingDown" @pulling-down="onPullingDown"
@pulling-up="onPullingUp"> @pulling-up="onPullingUp">
<template v-if="customPullDown" slot="pulldown" slot-scope="props"> <template v-if="customPullDown" slot="pulldown" slot-scope="props">
...@@ -188,6 +186,13 @@ ...@@ -188,6 +186,13 @@
} }
}, },
computed: { computed: {
scrollOptions() {
return {
pullDownRefresh: this.pullDownRefreshObj,
pullUpLoad: this.pullUpLoadObj,
scrollbar: this.scrollbarObj
}
},
scrollbarObj: function () { scrollbarObj: function () {
return this.scrollbar ? {fade: this.scrollbarFade} : false return this.scrollbar ? {fade: this.scrollbarFade} : false
}, },
...@@ -311,6 +316,7 @@ ...@@ -311,6 +316,7 @@
color: #666 color: #666
&.rotate &.rotate
transform: rotate(180deg) transform: rotate(180deg)
.scroll-list-wrap .scroll-list-wrap
position relative position relative
height: 480px height: 480px
......
...@@ -58,6 +58,14 @@ ...@@ -58,6 +58,14 @@
const EVENT_PULLING_DOWN = 'pulling-down' const EVENT_PULLING_DOWN = 'pulling-down'
const EVENT_PULLING_UP = 'pulling-up' const EVENT_PULLING_UP = 'pulling-up'
const DEFAULT_OPTIONS = {
click: true,
probeType: 1,
scrollbar: false,
pullDownRefresh: false,
pullUpLoad: false
}
export default { export default {
name: COMPONENT_NAME, name: COMPONENT_NAME,
props: { props: {
...@@ -67,13 +75,11 @@ ...@@ -67,13 +75,11 @@
return [] return []
} }
}, },
probeType: { options: {
type: Number, type: Object,
default: 1 default() {
}, return {}
click: { }
type: Boolean,
default: true
}, },
listenScroll: { listenScroll: {
type: Boolean, type: Boolean,
...@@ -87,15 +93,6 @@ ...@@ -87,15 +93,6 @@
type: String, type: String,
default: DIRECTION_V default: DIRECTION_V
}, },
scrollbar: {
default: false
},
pullDownRefresh: {
default: false
},
pullUpLoad: {
default: false
},
refreshDelay: { refreshDelay: {
type: Number, type: Number,
default: 20 default: 20
...@@ -113,14 +110,22 @@ ...@@ -113,14 +110,22 @@
} }
}, },
computed: { computed: {
pullUpLoad() {
return this.options.pullUpLoad
},
pullDownRefresh() {
return this.options.pullDownRefresh
},
pullUpTxt() { pullUpTxt() {
const moreTxt = this.pullUpLoad && this.pullUpLoad.txt && this.pullUpLoad.txt.more || DEFAULT_LOAD_TXT_MORE const pullUpLoad = this.pullUpLoad
const noMoreTxt = this.pullUpLoad && this.pullUpLoad.txt && this.pullUpLoad.txt.noMore || DEFAULT_LOAD_TXT_NO_MORE const moreTxt = pullUpLoad && pullUpLoad.txt && pullUpLoad.txt.more || DEFAULT_LOAD_TXT_MORE
const noMoreTxt = pullUpLoad && pullUpLoad.txt && pullUpLoad.txt.noMore || DEFAULT_LOAD_TXT_NO_MORE
return this.pullUpDirty ? moreTxt : noMoreTxt return this.pullUpDirty ? moreTxt : noMoreTxt
}, },
refreshTxt() { refreshTxt() {
return this.pullDownRefresh && this.pullDownRefresh.txt || DEFAULT_REFRESH_TXT const pullDownRefresh = this.pullDownRefresh
return pullDownRefresh && pullDownRefresh.txt || DEFAULT_REFRESH_TXT
} }
}, },
created() { created() {
...@@ -140,15 +145,10 @@ ...@@ -140,15 +145,10 @@
this.$refs.list.style.minHeight = `${getRect(this.$refs.wrapper).height + 1}px` this.$refs.list.style.minHeight = `${getRect(this.$refs.wrapper).height + 1}px`
} }
let options = { let options = Object.assign({}, DEFAULT_OPTIONS, {
probeType: this.probeType,
click: this.click,
scrollY: this.direction === DIRECTION_V, scrollY: this.direction === DIRECTION_V,
scrollX: this.direction === DIRECTION_H, scrollX: this.direction === DIRECTION_H
scrollbar: this.scrollbar, }, this.options)
pullDownRefresh: this.pullDownRefresh,
pullUpLoad: this.pullUpLoad
}
this.scroll = new BScroll(this.$refs.wrapper, options) this.scroll = new BScroll(this.$refs.wrapper, options)
...@@ -297,6 +297,7 @@ ...@@ -297,6 +297,7 @@
position: relative position: relative
z-index: 1 z-index: 1
background-color: $scroll-content-bgc background-color: $scroll-content-bgc
.cube-scroll-item .cube-scroll-item
height: 60px height: 60px
line-height: 60px line-height: 60px
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册