Skip to content

Commit a71229c

Browse files
author
chenxuan
committedDec 16, 2017
💤 新增配置openWatch 是否开启data监控实时刷新 npm 1.0.2
·
v1.1.12v1.0.14
1 parent 0663b5c commit a71229c

File tree

7 files changed

+103
-19
lines changed

7 files changed

+103
-19
lines changed
 

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,8 @@ Example:
6767
step: 1, //步长 越大滚动速度越快
6868
limitMoveNum: 5, //启动无缝滚动最小数据量 this.dataList.length
6969
hoverStop: true, //是否启用鼠标hover控制
70-
direction: 1 //1 往上 0 往下
70+
direction: 1, //1 往上 0 往下
71+
openWatch: true //开启data实时监听
7172
}
7273
}
7374
```

‎dist/vue-seamless-scroll.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -334,7 +334,8 @@ exports.default = {
334334
step: 1,
335335
limitMoveNum: 5,
336336
hoverStop: true,
337-
direction: 1 };
337+
direction: 1,
338+
openWatch: true };
338339
},
339340
options: function options() {
340341
return (0, _assign2.default)({}, this.defaultOption, this.classOption);
@@ -345,11 +346,11 @@ exports.default = {
345346
},
346347
methods: {
347348
enter: function enter() {
348-
if (!this.options.hoverStop || this.moveSwitch) return;
349+
if (!this.options.openWatch || !this.options.hoverStop || this.moveSwitch) return;
349350
cancelAnimationFrame(this.reqFrame);
350351
},
351352
leave: function leave() {
352-
if (!this.options.hoverStop || this.moveSwitch) return;
353+
if (!this.options.openWatch || !this.options.hoverStop || this.moveSwitch) return;
353354
this._move();
354355
},
355356
_move: function _move() {
@@ -394,7 +395,9 @@ exports.default = {
394395

395396
watch: {
396397
data: function data(newData, oldData) {
398+
if (!this.options.openWatch) return;
397399
if (!arrayEqual(newData, oldData.concat(oldData))) {
400+
console.log(111);
398401
cancelAnimationFrame(this.reqFrame);
399402
this._initMove();
400403
}

‎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: 85 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,37 +23,56 @@
2323
<my-class :data="listData" :classOption="classOption" @copyData="listData = listData.concat(listData)"
2424
class="warp">
2525
<ul class="item">
26-
<li v-for="item in listData"><span class="title">{{item.title}}</span><span class="date">{{item.date}}</span></li>
26+
<li v-for="item in listData"><span class="title">{{item.title}}</span><span class="date">{{item.date}}</span>
27+
</li>
2728
</ul>
2829
</my-class>
2930
</div>
3031
<div class="flex wd800">
3132
<div class="options" style="color:#357edd;">
32-
<p><b>demo2</b> limitMoveNum过大不滚动</p>
33+
<p><b>demo2</b> limitMoveNum过大不滚动 开启了openWatch</p>
3334
var option = {<br/>
34-
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limitMoveNum: 10<br/>
35+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limitMoveNum: 7<br/>
3536
}
3637
</div>
3738
<my-class :data="listData1" :classOption="classOption1" @copyData="listData1 = listData1.concat(listData1)"
3839
class="warp">
3940
<ul class="item">
40-
<li v-for="item in listData1"><span class="title">{{item.title}}</span><span class="date">{{item.date}}</span></li>
41+
<li v-for="item in listData1"><span class="title">{{item.title}}</span><span
42+
class="date">{{item.date}}</span></li>
4143
</ul>
4244
</my-class>
4345
</div>
4446
<div class="flex wd800">
4547
<div class="options" style="color:#357edd;">
46-
<p><b>demo3</b> 向下滚动,禁止了hover悬停</p>
48+
<p><b>demo3</b> limitMoveNum过大不滚动 关闭了openWatch</p>
49+
var option = {<br/>
50+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limitMoveNum: 7<br/>
51+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;openWatch: false<br/>
52+
}
53+
</div>
54+
<my-class :data="listData2" :classOption="classOption2" @copyData="listData2 = listData2.concat(listData2)"
55+
class="warp">
56+
<ul class="item">
57+
<li v-for="item in listData2"><span class="title">{{item.title}}</span><span
58+
class="date">{{item.date}}</span></li>
59+
</ul>
60+
</my-class>
61+
</div>
62+
<div class="flex wd800">
63+
<div class="options" style="color:#357edd;">
64+
<p><b>demo4</b> 向下滚动,禁止了hover悬停</p>
4765
var option = {<br/>
4866
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limitMoveNum: 5,<br/>
4967
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction: 0,<br/>
5068
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hoverStop: false,<br/>
5169
}
5270
</div>
53-
<my-class :data="listData2" :classOption="classOption2" @copyData="listData2 = listData2.concat(listData2)"
71+
<my-class :data="listData3" :classOption="classOption3" @copyData="listData3 = listData3.concat(listData3)"
5472
class="warp">
5573
<ul class="item">
56-
<li v-for="item in listData2"><span class="title">{{item.title}}</span><span class="date">{{item.date}}</span></li>
74+
<li v-for="item in listData3"><span class="title">{{item.title}}</span><span
75+
class="date">{{item.date}}</span></li>
5776
</ul>
5877
</my-class>
5978
</div>
@@ -132,6 +151,25 @@
132151
}, {
133152
'title': '无缝滚动第六行无缝滚动第六行',
134153
'date': '2017-12-16'
154+
}],
155+
listData3: [{
156+
'title': '无缝滚动第一行无缝滚动第一行',
157+
'date': '2017-12-16'
158+
}, {
159+
'title': '无缝滚动第二行无缝滚动第二行',
160+
'date': '2017-12-16'
161+
}, {
162+
'title': '无缝滚动第三行无缝滚动第三行',
163+
'date': '2017-12-16'
164+
}, {
165+
'title': '无缝滚动第四行无缝滚动第四行',
166+
'date': '2017-12-16'
167+
}, {
168+
'title': '无缝滚动第五行无缝滚动第五行',
169+
'date': '2017-12-16'
170+
}, {
171+
'title': '无缝滚动第六行无缝滚动第六行',
172+
'date': '2017-12-16'
135173
}, {
136174
'title': '无缝滚动第七行无缝滚动第七行',
137175
'date': '2017-12-16'
@@ -150,10 +188,16 @@
150188
},
151189
classOption1 () {
152190
return {
153-
limitMoveNum: 10
191+
limitMoveNum: 7
154192
}
155193
},
156194
classOption2 () {
195+
return {
196+
limitMoveNum: 7,
197+
openWatch: false
198+
}
199+
},
200+
classOption3 () {
157201
return {
158202
limitMoveNum: 5,
159203
direction: 0,
@@ -163,6 +207,38 @@
163207
},
164208
components: {
165209
myClass
210+
},
211+
created () {
212+
setTimeout(() => {
213+
this.listData1 = this.listData2 = [{
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+
}, {
226+
'title': '无缝滚动第五行无缝滚动第五行',
227+
'date': '2017-12-16'
228+
}, {
229+
'title': '无缝滚动第六行无缝滚动第六行',
230+
'date': '2017-12-16'
231+
}, {
232+
'title': '无缝滚动第七行无缝滚动第七行',
233+
'date': '2017-12-16'
234+
}, {
235+
'title': '无缝滚动第八行无缝滚动第八行',
236+
'date': '2017-12-16'
237+
}, {
238+
'title': '无缝滚动第九行无缝滚动第九行',
239+
'date': '2017-12-16'
240+
}]
241+
}, 3000)
166242
}
167243
}
168244
</script>
@@ -171,6 +247,7 @@
171247
#app {
172248
padding-bottom: 100px;
173249
}
250+
174251
.flex-fill {
175252
-ms-flex: 1 1;
176253
flex: 1 1;

‎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.1",
3+
"version": "1.0.2",
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: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@
3434
step: 1, //步长
3535
limitMoveNum: 5, //启动无缝滚动最小数据数
3636
hoverStop: true, //是否启用鼠标hover控制
37-
direction: 1 //1 往上 0 往下
37+
direction: 1, //1 往上 0 往下
38+
openWatch: true //开启data实时监听
3839
}
3940
},
4041
options () {
@@ -47,11 +48,11 @@
4748
},
4849
methods: {
4950
enter () {
50-
if (!this.options.hoverStop || this.moveSwitch) return
51+
if (!this.options.openWatch || !this.options.hoverStop || this.moveSwitch) return
5152
cancelAnimationFrame(this.reqFrame)
5253
},
5354
leave () {
54-
if (!this.options.hoverStop || this.moveSwitch) return
55+
if (!this.options.openWatch || !this.options.hoverStop || this.moveSwitch) return
5556
this._move()
5657
},
5758
_move () {
@@ -93,7 +94,9 @@
9394
},
9495
watch: {
9596
data (newData, oldData) {
97+
if (!this.options.openWatch) return
9698
if (!arrayEqual(newData, oldData.concat(oldData))) {
99+
console.log(111)
97100
cancelAnimationFrame(this.reqFrame)
98101
this._initMove()
99102
}

1 commit comments

Comments
 (1)

wyw0228 commented on Sep 11, 2019

@wyw0228
wyw0228
on Sep 11, 2019

请求完后台数据加载进去就不会滚动了，怎么搞

Please sign in to comment.