Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 807cdbe

Browse files
committed
update
1 parent be5a20b commit 807cdbe

File tree

4 files changed

+62
-46
lines changed

4 files changed

+62
-46
lines changed

‎README.md‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1 @@
1-
# vue-ohyeah
2-
3-
> A Vue.js project
4-
5-
## Build Setup
6-
7-
``` bash
8-
# install dependencies
9-
npm install
10-
11-
# serve with hot reload at localhost:8080
12-
npm run dev
13-
14-
# build for production with minification
15-
npm run build
16-
```
17-
18-
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
1+
正在做...

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
1212
},
1313
"dependencies": {
14+
"element-resize-detector": "^1.1.15",
1415
"vue": "^2.5.11"
1516
},
1617
"files": [

‎src/App.vue‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@
22
<div id="app">
33
<p>a</p>
44
<p>a</p>
5-
<div class="demo-div">
6-
<ohyeah-scroll>
5+
<div ref="box"
6+
class="demo-div">
7+
<ohyeah-scroll trackColor="transparent">
78
<ul>
89
<li v-for="(item,index) in arr"
910
:key="index">{{`${item}-${index}`}}</li>
1011
</ul>
1112
</ohyeah-scroll>
1213
</div>
1314
<button @click="add">add</button>
15+
<button @click="changeBox">changeBox</button>
1416
</div>
1517
</template>
1618

@@ -20,12 +22,15 @@ export default {
2022
data() {
2123
return {
2224
msg: "Welcome to Your Vue.js App",
23-
arr: new Array(2).fill("a")
25+
arr: new Array(50).fill("a")
2426
};
2527
},
2628
methods: {
2729
add() {
2830
this.arr.push(this.arr.length + 1);
31+
},
32+
changeBox() {
33+
this.$refs.box.style.height = Math.random() * 200 + 300 + "px";
2934
}
3035
}
3136
};

‎src/packages/ohyeah/ohyeah.vue‎

Lines changed: 52 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,21 @@
55
<div @mousedown.stop="onTrackMousedown($event,1)"
66
@mouseenter.stop="hoverH = true"
77
@mouseleave.stop="hoverH = false"
8+
:style="`background-color:${trackColor};`"
89
:class="['ohyeah-scroll-vertical-track-h',{'disabled': !isShowH},{'show': barHDown }]">
910
<div @mousedown.stop="onBarMousedown($event, 1)"
1011
ref="ohyeahbarh"
11-
:style="`width:${(hoverH || barHDown )? breadth + 4 : breadth}px;height: ${barHTall}px;transform: translateY(${barHScrollTop}px);border-radius:${breadth}px`"></div>
12+
:style="`background-color:${thumbColor};width:${(hoverH || barHDown )? breadth + 4 : breadth}px;height: ${barHTall}px;transform: translateY(${barHScrollTop}px);border-radius:${breadth}px`"></div>
1213
</div>
1314
<!-- 横向滚动条 -->
1415
<div @mousedown.stop="onTrackMousedown($event,2)"
1516
@mouseenter.stop="hoverW = true"
1617
@mouseleave.stop="hoverW = false"
18+
:style="`background-color:${trackColor};`"
1719
:class="['ohyeah-scroll-vertical-track-w',{'disabled': !isShowW},{'show': barWDown }]">
1820
<div @mousedown.stop="onBarMousedown($event,2)"
1921
ref="ohyeahbarw"
20-
:style="`height:${(hoverW || barWDown) ? breadth + 4 : breadth}px;width: ${barWTall}px;transform: translateX(${barWScrollLeft}px)`"></div>
22+
:style="`background-color:${thumbColor};height:${(hoverW || barWDown) ? breadth + 4 : breadth}px;width: ${barWTall}px;transform: translateX(${barWScrollLeft}px)`"></div>
2123
</div>
2224
<!-- 默认内容 -->
2325
<div ref="ohyeahbody"
@@ -29,7 +31,9 @@
2931
</div>
3032
</template>
3133
<script>
32-
// todo: 各种自定义:颜色,模式(固定小圆球),监听方法兼容性,超大数组测试,外层容器大小改变时监听
34+
// todo: 各种自定义:颜色V,监听方法兼容性V,外层容器大小改变时监听V,事件(到顶,到底,滚动的值),方法(设置滚动条位置),边缘检测,数量减少时滚动条位置处理
35+
import ElementResizeDetectorMaker from "element-resize-detector";
36+
3337
export default {
3438
name: "ohyeah-scroll",
3539
data() {
@@ -51,17 +55,19 @@ export default {
5155
scaleH: 1, // 比例尺
5256
scaleW: 1,
5357
hoverH: false, // H悬浮
54-
hoverW: false // W悬浮
58+
hoverW: false, // W悬浮
59+
timer: null
5560
};
5661
},
5762
props: {
58-
breadth: { type: Number, default: 6 } // bar宽窄
63+
breadth: { type: Number, default: 6 }, // bar宽窄
64+
trackColor: { type: String, default: "rgba(255, 255, 255, 0.5)" }, // 轨道背景色
65+
thumbColor: { type: String, default: "#7f7f7f" } // 滑块背景色
5966
},
6067
mounted() {
6168
console.log("slot", this.$slots, this.$refs);
6269
// 监听内部宽高变化,用于调整滚动条大小和位置
63-
this.observer = new ResizeObserver(this.callback);
64-
this.observer.observe(this.$refs.ohyeahbody);
70+
this.listenResize();
6571
// 监听鼠标拖动事件
6672
document.addEventListener("mousemove", this.onBarDragMove);
6773
document.addEventListener("mouseup", this.onMouseUp);
@@ -70,12 +76,31 @@ export default {
7076
beforeDestroy() {
7177
// 卸载鼠标拖动事件
7278
document.removeEventListener("mousemove", this.onBarDragMove);
73-
this.observer.disconnect();
79+
if (window.ResizeObserver) {
80+
this.observer.disconnect();
81+
} else {
82+
this.observer.uninstall();
83+
}
7484
this.observer = null;
7585
},
7686
7787
computed: {},
7888
methods: {
89+
// 监听容器变化
90+
listenResize() {
91+
// 如果支持ResizeObserver就用这个
92+
if (window.ResizeObserver) {
93+
this.observer = new ResizeObserver(this.callback);
94+
this.observer.observe(this.$refs.ohyeahbody);
95+
this.observer.observe(this.$refs.ohyeahbox);
96+
} else {
97+
this.observer = ElementResizeDetectorMaker({
98+
strategy: "scroll"
99+
});
100+
this.observer.listenTo(this.$refs.ohyeahbody, this.callback);
101+
this.observer.listenTo(this.$refs.ohyeahbox, this.callback);
102+
}
103+
},
79104
callback(msg) {
80105
const a = this.$refs.ohyeahbox.getBoundingClientRect(); // 外壳大小
81106
const b = this.$refs.ohyeahbody.getBoundingClientRect(); // body大小
@@ -168,19 +193,26 @@ export default {
168193
e.preventDefault();
169194
e.stopPropagation();
170195
e.stopImmediatePropagation();
171-
const a = this.$refs.ohyeahbox.getBoundingClientRect(); // 外壳大小
172-
if (this.isShowH) {
173-
this.barHScrollTop = Math.min(
174-
Math.max(this.barHScrollTop - e.wheelDeltaY / 10, 0),
175-
a.height - this.barHTall - 4
176-
);
177-
}
178-
if (this.isShowW) {
179-
this.barWScrollLeft = Math.min(
180-
Math.max(this.barWScrollLeft - e.wheelDeltaX / 10, 0),
181-
a.width - this.barWTall - 4
182-
);
196+
// 节流
197+
if (this.timer) {
198+
return;
183199
}
200+
this.timer = setTimeout(() => {
201+
const a = this.$refs.ohyeahbox.getBoundingClientRect(); // 外壳大小
202+
if (this.isShowH) {
203+
this.barHScrollTop = Math.min(
204+
Math.max(this.barHScrollTop + e.deltaY / 5, 0),
205+
a.height - this.barHTall - 4
206+
);
207+
}
208+
if (this.isShowW) {
209+
this.barWScrollLeft = Math.min(
210+
Math.max(this.barWScrollLeft + e.deltaX / 5, 0),
211+
a.width - this.barWTall - 4
212+
);
213+
}
214+
this.timer = null;
215+
});
184216
}
185217
}
186218
};
@@ -213,14 +245,11 @@ export default {
213245
z-index: 10;
214246
cursor: pointer;
215247
opacity: 0;
216-
217-
background-color: rgba(255, 255, 255, 0.5);
218248
transition: opacity 200ms, width 200ms;
219249
&.show {
220250
opacity: 1;
221251
}
222252
& > div {
223-
background-color: #7f7f7f;
224253
border-radius: 999px;
225254
transition: height 200ms, width 200ms;
226255
}
@@ -235,13 +264,11 @@ export default {
235264
z-index: 9;
236265
cursor: pointer;
237266
opacity: 0;
238-
background-color: rgba(255, 255, 255, 0.5);
239267
transition: opacity 200ms, width 200ms;
240268
&.show {
241269
opacity: 1;
242270
}
243271
& > div {
244-
background-color: #7f7f7f;
245272
border-radius: 999px;
246273
transition: height 200ms, width 200ms;
247274
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /