Skip to content

Commit cdcd01e

Browse files
author
binaryify
committed
improve
1 parent 28cd40d commit cdcd01e

24 files changed

+568
-146
lines changed

‎dist/vueScrollbar.common.js‎

Lines changed: 10 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vueScrollbar.common.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vueScrollbar.umd.js‎

Lines changed: 10 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vueScrollbar.umd.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vueScrollbar.umd.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vueScrollbar.umd.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/.vuepress/components/demo-1.vue‎

Lines changed: 78 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,46 @@
11
<template>
2-
<div>
3-
<vue-custom-scrollbar class="scroll-area" :settings="settings" @ps-scroll-y="scrollHanle">
4-
<img src="http://utatti.github.io/perfect-scrollbar/azusa.jpg" height="720" width="1280" alt="">
5-
</vue-custom-scrollbar>
6-
</div>
2+
<div id="demo">
3+
<vue-custom-scrollbar class="scroll-area" :settings="settings" @ps-scroll-y="scrollHanle" @ps-y-reach-end="loadMore" :style="'width:'+width+'px;height:'+height+'px'">
4+
<div class="demoImg"></div>
5+
</vue-custom-scrollbar>
6+
<ul>
7+
<li>
8+
<label>
9+
wheelPropagation
10+
<input type="checkbox" v-model="settings.wheelPropagation">
11+
</label>
12+
</li>
13+
<li>
14+
<label>
15+
suppressScrollX
16+
<input type="checkbox" v-model="settings.suppressScrollX">
17+
</label>
18+
</li>
19+
<li>
20+
<label>
21+
suppressScrollY
22+
<input type="checkbox" v-model="settings.suppressScrollY">
23+
</label>
24+
</li>
25+
<li>
26+
<label>
27+
width
28+
<input type="input" v-model="width">
29+
</label>
30+
</li>
31+
<li>
32+
<label>
33+
height
34+
<input type="input" v-model="height">
35+
</label>
36+
</li>
37+
</ul>
38+
</div>
739
</template>
840

941
<script>
1042
import vueCustomScrollbar from '../../../src/vue-scrollbar.vue'
43+
1144
export default {
1245
components: {
1346
vueCustomScrollbar
@@ -16,13 +49,45 @@ export default {
1649
data() {
1750
return {
1851
settings: {
19-
maxScrollbarLength: 60
20-
}
52+
suppressScrollY: false,
53+
suppressScrollX: false,
54+
wheelPropagation: false
55+
},
56+
height: '400',
57+
width: '600'
58+
}
59+
},
60+
mounted() {
61+
if (!this.IsPC()) {
62+
this.height = 400 / 2.5
63+
this.width = 600 / 2.5
2164
}
2265
},
2366
methods: {
2467
scrollHanle(evt) {
2568
console.log(evt)
69+
},
70+
loadMore() {
71+
console.log('reach end')
72+
},
73+
IsPC() {
74+
var userAgentInfo = navigator.userAgent
75+
var Agents = new Array(
76+
'Android',
77+
'iPhone',
78+
'SymbianOS',
79+
'Windows Phone',
80+
'iPad',
81+
'iPod'
82+
)
83+
var flag = true
84+
for (var v = 0; v < Agents.length; v++) {
85+
if (userAgentInfo.indexOf(Agents[v]) > 0) {
86+
flag = false
87+
break
88+
}
89+
}
90+
return flag
2691
}
2792
}
2893
}
@@ -31,7 +96,11 @@ export default {
3196
.scroll-area {
3297
position: relative;
3398
margin: auto;
34-
width: 600px;
35-
height: 400px;
99+
}
100+
101+
.scroll-area .demoImg {
102+
background-image: url('../../azusa.jpg');
103+
width: 1280px;
104+
height: 720px;
36105
}
37106
</style>

‎docs/.vuepress/config.js‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,30 @@ module.exports = {
66
text: 'GitHub',
77
link: 'https://github.com/Binaryify/vue-custom-scrollbar'
88
}
9-
]
9+
],
10+
sidebar: 'auto',
11+
locales: {
12+
'/': {
13+
label: '中文',
14+
selectText: '选择语言'
15+
},
16+
'/en/': {
17+
label: 'English',
18+
selectText: 'Languages'
19+
}
20+
}
21+
},
22+
locales: {
23+
// 键名是该语言所属的子路径
24+
// 作为特例，默认语言可以使用 '/' 作为其路径。
25+
'/': {
26+
lang: 'zh-CN', // 将会被设置为 <html> 的 lang 属性
27+
description: 'Vue.JS 的迷你但完美的自定义滚动条组件'
28+
},
29+
'/en/': {
30+
lang: 'en-US',
31+
description:
32+
'Minimalistic but perfect custom scrollbar component for Vue.JS'
33+
}
1034
}
1135
}

‎docs/.vuepress/dist/404.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<!DOCTYPE html>
2-
<html lang="en-US">
2+
<html lang="zh-CN">
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width,initial-scale=1">
66
<title>VuePress</title>
7-
<meta name="description" content="">
7+
<meta name="description" content="Vue.JS 的迷你但完美的自定义滚动条组件">
88

99

10-
<link rel="preload" href="/vue-custom-scrollbar/assets/css/0.styles.b075adcd.css" as="style"><link rel="preload" href="/vue-custom-scrollbar/assets/js/app.ef5bfea1.js" as="script"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/2.da42264c.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/3.7b364f08.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/4.134216c8.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/5.f7209ce5.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/6.75c9d241.js">
11-
<link rel="stylesheet" href="/vue-custom-scrollbar/assets/css/0.styles.b075adcd.css">
10+
<link rel="preload" href="/vue-custom-scrollbar/assets/css/0.styles.2e1de20b.css" as="style"><link rel="preload" href="/vue-custom-scrollbar/assets/js/app.bb026c28.js" as="script"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/2.da42264c.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/3.7b364f08.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/4.c5c5aee4.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/5.8bc6869b.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/6.b8a737be.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/7.9f00cfd5.js">
11+
<link rel="stylesheet" href="/vue-custom-scrollbar/assets/css/0.styles.2e1de20b.css">
1212
</head>
1313
<body>
14-
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1> <blockquote>Looks like we've got some broken links.</blockquote> <a href="/vue-custom-scrollbar/" class="router-link-active">Take me home.</a></div></div></div>
15-
<script src="/vue-custom-scrollbar/assets/js/app.ef5bfea1.js" defer></script>
14+
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1> <blockquote>How did we get here?</blockquote> <a href="/vue-custom-scrollbar/" class="router-link-active">Take me home.</a></div></div></div>
15+
<script src="/vue-custom-scrollbar/assets/js/app.bb026c28.js" defer></script>
1616
</body>
1717
</html>

‎docs/.vuepress/dist/assets/css/0.styles.b075adcd.css‎ renamed to ‎docs/.vuepress/dist/assets/css/0.styles.2e1de20b.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)