Skip to content

Commit 257f533

Browse files
author
chenxuan
committedDec 16, 2017
🐕 新增配置singleHeight waitTime参数 控制是否单步滚动 npm 1.0.3
·
v1.1.12v1.0.14
1 parent a71229c commit 257f533

File tree

7 files changed

+103
-16
lines changed

7 files changed

+103
-16
lines changed
 

‎README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,9 @@ Example:
6868
limitMoveNum: 5, //启动无缝滚动最小数据量 this.dataList.length
6969
hoverStop: true, //是否启用鼠标hover控制
7070
direction: 1, //1 往上 0 往下
71-
openWatch: true //开启data实时监听
71+
openWatch: true, //开启data实时监听
72+
singleHeight: 0, //单条数据高度有值hoverStop关闭
73+
waitTime: 1000 //单步停止等待时间
7274
}
7375
}
7476
```

‎dist/vue-seamless-scroll.js

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -335,7 +335,9 @@ exports.default = {
335335
limitMoveNum: 5,
336336
hoverStop: true,
337337
direction: 1,
338-
openWatch: true };
338+
openWatch: true,
339+
singleHeight: 0,
340+
waitTime: 1000 };
339341
},
340342
options: function options() {
341343
return (0, _assign2.default)({}, this.defaultOption, this.classOption);
@@ -346,17 +348,18 @@ exports.default = {
346348
},
347349
methods: {
348350
enter: function enter() {
349-
if (!this.options.openWatch || !this.options.hoverStop || this.moveSwitch) return;
351+
if (!this.options.openWatch || !!this.options.singleHeight || !this.options.hoverStop || this.moveSwitch) return;
350352
cancelAnimationFrame(this.reqFrame);
351353
},
352354
leave: function leave() {
353-
if (!this.options.openWatch || !this.options.hoverStop || this.moveSwitch) return;
355+
if (!this.options.openWatch || !!this.options.singleHeight || !this.options.hoverStop || this.moveSwitch) return;
354356
this._move();
355357
},
356358
_move: function _move() {
357359
var _this = this;
358360

359361
this.reqFrame = requestAnimationFrame(function () {
362+
var timer = void 0;
360363
var h = _this.$refs.wrapper.offsetHeight / 2;
361364
var direction = _this.options.direction;
362365
if (direction === 1) {
@@ -369,7 +372,18 @@ exports.default = {
369372
} else {
370373
_this.yPos += _this.options.step;
371374
}
372-
_this._move();
375+
if (!!_this.options.singleHeight) {
376+
if (Math.abs(_this.yPos) % _this.options.singleHeight === 0) {
377+
if (timer) clearTimeout(timer);
378+
timer = setTimeout(function () {
379+
_this._move();
380+
}, _this.options.waitTime);
381+
} else {
382+
_this._move();
383+
}
384+
} else {
385+
_this._move();
386+
}
373387
});
374388
},
375389
_initMove: function _initMove() {
@@ -397,7 +411,6 @@ exports.default = {
397411
data: function data(newData, oldData) {
398412
if (!this.options.openWatch) return;
399413
if (!arrayEqual(newData, oldData.concat(oldData))) {
400-
console.log(111);
401414
cancelAnimationFrame(this.reqFrame);
402415
this._initMove();
403416
}

‎dist/vue-seamless-scroll.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.

‎examples-src/App.vue

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
<div class="flex wd800">
3232
<div class="options" style="color:#357edd;">
3333
<p><b>demo2</b> limitMoveNum过大不滚动 开启了openWatch</p>
34+
<p>3s后data增加到9条</p>
3435
var option = {<br/>
3536
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limitMoveNum: 7<br/>
3637
}
@@ -46,6 +47,7 @@
4647
<div class="flex wd800">
4748
<div class="options" style="color:#357edd;">
4849
<p><b>demo3</b> limitMoveNum过大不滚动 关闭了openWatch</p>
50+
<p>3s后data增加到9条</p>
4951
var option = {<br/>
5052
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limitMoveNum: 7<br/>
5153
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;openWatch: false<br/>
@@ -76,6 +78,22 @@
7678
</ul>
7779
</my-class>
7880
</div>
81+
<div class="flex wd800">
82+
<div class="options" style="color:#357edd;">
83+
<p><b>demo1</b> 向上无缝滚动,单条停止一段时间</p>
84+
var option = {<br/>
85+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;step: 0.5,<br/>
86+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limitMoveNum: 5<br/>
87+
}
88+
</div>
89+
<my-class :data="listData4" :classOption="classOption4" @copyData="listData4 = listData4.concat(listData4)"
90+
class="warp">
91+
<ul class="item">
92+
<li v-for="item in listData4"><span class="title">{{item.title}}</span><span class="date">{{item.date}}</span>
93+
</li>
94+
</ul>
95+
</my-class>
96+
</div>
7997
</div>
8098
</template>
8199

@@ -176,7 +194,35 @@
176194
}, {
177195
'title': '无缝滚动第八行无缝滚动第八行',
178196
'date': '2017-12-16'
179-
}]
197+
}],
198+
listData4: [{
199+
'title': '无缝滚动第一行无缝滚动第一行',
200+
'date': '2017-12-16'
201+
}, {
202+
'title': '无缝滚动第二行无缝滚动第二行',
203+
'date': '2017-12-16'
204+
}, {
205+
'title': '无缝滚动第三行无缝滚动第三行',
206+
'date': '2017-12-16'
207+
}, {
208+
'title': '无缝滚动第四行无缝滚动第四行',
209+
'date': '2017-12-16'
210+
}, {
211+
'title': '无缝滚动第五行无缝滚动第五行',
212+
'date': '2017-12-16'
213+
}, {
214+
'title': '无缝滚动第六行无缝滚动第六行',
215+
'date': '2017-12-16'
216+
}, {
217+
'title': '无缝滚动第七行无缝滚动第七行',
218+
'date': '2017-12-16'
219+
}, {
220+
'title': '无缝滚动第八行无缝滚动第八行',
221+
'date': '2017-12-16'
222+
}, {
223+
'title': '无缝滚动第九行无缝滚动第九行',
224+
'date': '2017-12-16'
225+
}],
180226
}
181227
},
182228
computed: {
@@ -203,6 +249,14 @@
203249
direction: 0,
204250
hoverStop: false
205251
}
252+
},
253+
classOption4 () {
254+
return {
255+
step: 0.5,
256+
limitMoveNum: 5,
257+
singleHeight: 30,
258+
waitTime: 1000
259+
}
206260
}
207261
},
208262
components: {
@@ -258,7 +312,12 @@
258312
margin-right: 60px;
259313
p {
260314
color: #000;
315+
font-size: 14px;
261316
margin-bottom: 30px;
317+
b {
318+
font-size: 16px;
319+
font-style: italic;
320+
}
262321
}
263322
}
264323

‎examples/examples.bundle.js

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

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-seamless-scroll",
3-
"version": "1.0.2",
3+
"version": "1.0.3",
44
"description": "A simple, Seamless scrolling for Vue.js",
55
"main": "dist/vue-seamless-scroll.min.js",
66
"scripts": {

‎src/components/myClass.vue

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@
3535
limitMoveNum: 5, //启动无缝滚动最小数据数
3636
hoverStop: true, //是否启用鼠标hover控制
3737
direction: 1, //1 往上 0 往下
38-
openWatch: true //开启data实时监听
38+
openWatch: true, //开启data实时监听
39+
singleHeight: 0, //单条数据高度有值hoverStop关闭
40+
waitTime: 1000 //单步停止等待时间
3941
}
4042
},
4143
options () {
@@ -48,16 +50,17 @@
4850
},
4951
methods: {
5052
enter () {
51-
if (!this.options.openWatch || !this.options.hoverStop || this.moveSwitch) return
53+
if (!this.options.openWatch || !!this.options.singleHeight ||!this.options.hoverStop || this.moveSwitch) return
5254
cancelAnimationFrame(this.reqFrame)
5355
},
5456
leave () {
55-
if (!this.options.openWatch || !this.options.hoverStop || this.moveSwitch) return
57+
if (!this.options.openWatch || !!this.options.singleHeight ||!this.options.hoverStop || this.moveSwitch) return
5658
this._move()
5759
},
5860
_move () {
5961
this.reqFrame = requestAnimationFrame(
6062
() => {
63+
let timer
6164
let h = this.$refs.wrapper.offsetHeight / 2
6265
let direction = this.options.direction
6366
if (direction === 1) {
@@ -70,7 +73,18 @@
7073
} else {
7174
this.yPos += this.options.step
7275
}
73-
this._move()
76+
if (!!this.options.singleHeight) {
77+
if (Math.abs(this.yPos) % this.options.singleHeight === 0) {
78+
if (timer) clearTimeout(timer)
79+
timer = setTimeout(() => {
80+
this._move()
81+
}, this.options.waitTime)
82+
} else {
83+
this._move()
84+
}
85+
}else {
86+
this._move()
87+
}
7488
}
7589
)
7690
},
@@ -96,7 +110,6 @@
96110
data (newData, oldData) {
97111
if (!this.options.openWatch) return
98112
if (!arrayEqual(newData, oldData.concat(oldData))) {
99-
console.log(111)
100113
cancelAnimationFrame(this.reqFrame)
101114
this._initMove()
102115
}

0 commit comments

Comments
 (0)
Please sign in to comment.