Skip to content

Commit 0ee4489

Browse files
author
chenxuan
committedDec 18, 2017
🐤 去掉了emit回调(简化初始化) ☀️ npm 1.0.5
·
v1.1.12v1.0.14
1 parent d383270 commit 0ee4489

File tree

8 files changed

+57
-170
lines changed

8 files changed

+57
-170
lines changed
 

‎dist/vue-seamless-scroll.js

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,7 @@ exports.default = {
312312
return {
313313
yPos: 0,
314314
delay: 0,
315+
copyHtml: '',
315316
reqFrame: null
316317
};
317318
},
@@ -412,11 +413,12 @@ exports.default = {
412413
var _this3 = this;
413414

414415
this.reqFrame = requestAnimationFrame(function () {
415-
var timer = void 0;
416416
var h = _this3.$refs.wrapper.offsetHeight / 2;
417417
var direction = _this3.options.direction;
418418
if (direction === 1) {
419-
if (Math.abs(_this3.yPos) >= h) _this3.yPos = 0;
419+
if (Math.abs(_this3.yPos) >= h) {
420+
_this3.yPos = 0;
421+
}
420422
} else {
421423
if (_this3.yPos >= 0) _this3.yPos = h * -1;
422424
}
@@ -427,6 +429,7 @@ exports.default = {
427429
}
428430
if (!!_this3.options.singleHeight) {
429431
if (Math.abs(_this3.yPos) % _this3.options.singleHeight === 0) {
432+
var timer = void 0;
430433
if (timer) clearTimeout(timer);
431434
timer = setTimeout(function () {
432435
_this3._move();
@@ -442,13 +445,20 @@ exports.default = {
442445
_initMove: function _initMove() {
443446
var _this4 = this;
444447

448+
this.copyHtml = '';
445449
if (this.moveSwitch) {
446450
cancelAnimationFrame(this.reqFrame);
447451
this.yPos = 0;
448452
} else {
449-
this.$emit('copy-data');
453+
var timer = void 0;
454+
if (timer) clearTimeout(timer);
455+
timer = setTimeout(function () {
456+
_this4.copyHtml = _this4.$refs.slotList.innerHTML;
457+
}, 20);
450458
if (this.options.direction !== 1) {
451-
setTimeout(function () {
459+
var _timer = void 0;
460+
if (_timer) clearTimeout(_timer);
461+
_timer = setTimeout(function () {
452462
_this4.yPos = _this4.$refs.wrapper.offsetHeight / 2 * -1;
453463
}, 20);
454464
}
@@ -463,7 +473,7 @@ exports.default = {
463473
watch: {
464474
data: function data(newData, oldData) {
465475
if (!this.options.openWatch) return;
466-
if (!arrayEqual(newData, oldData.concat(oldData))) {
476+
if (!arrayEqual(newData, oldData)) {
467477
cancelAnimationFrame(this.reqFrame);
468478
this._initMove();
469479
}
@@ -978,7 +988,13 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
978988
}, [_c('div', {
979989
ref: "wrapper",
980990
style: (_vm.pos)
981-
}, [_vm._t("default")], 2)])
991+
}, [_c('div', {
992+
ref: "slotList"
993+
}, [_vm._t("default")], 2), _vm._v(" "), _c('div', {
994+
domProps: {
995+
"innerHTML": _vm._s(_vm.copyHtml)
996+
}
997+
})])])
982998
},staticRenderFns: []}
983999
module.exports.render._withStripped = true
9841000
if (false) {

‎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: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@
2020
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limitMoveNum: 5<br/>
2121
}
2222
</div>
23-
<my-class :data="listData" :class-option="classOption" @copy-data="listData = listData.concat(listData)"
24-
class="warp">
23+
<my-class :data="listData" :class-option="classOption" class="warp">
2524
<ul class="item">
2625
<li v-for="item in listData"><span class="title" v-text="item.title"></span><span class="date"
2726
v-text="item.date"></span>
@@ -37,9 +36,7 @@
3736
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limitMoveNum: 7<br/>
3837
}
3938
</div>
40-
<my-class :data="listData1" :class-option="classOption1"
41-
@copy-data="listData1 = listData1.concat(listData1)"
42-
class="warp">
39+
<my-class :data="listData1" :class-option="classOption1" class="warp">
4340
<ul class="item">
4441
<li v-for="item in listData1"><span class="title" v-text="item.title"></span><span
4542
class="date" v-text="item.date"></span></li>
@@ -55,9 +52,7 @@
5552
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;openWatch: false<br/>
5653
}
5754
</div>
58-
<my-class :data="listData2" :class-option="classOption2"
59-
@copy-data="listData2 = listData2.concat(listData2)"
60-
class="warp">
55+
<my-class :data="listData2" :class-option="classOption2" class="warp">
6156
<ul class="item">
6257
<li v-for="item in listData2"><span class="title" v-text="item.title"></span><span
6358
class="date" v-text="item.date"></span></li>
@@ -73,9 +68,7 @@
7368
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hoverStop: false,<br/>
7469
}
7570
</div>
76-
<my-class :data="listData3" :class-option="classOption3"
77-
@copy-data="listData3 = listData3.concat(listData3)"
78-
class="warp">
71+
<my-class :data="listData3" :class-option="classOption3" class="warp">
7972
<ul class="item">
8073
<li v-for="item in listData3"><span class="title" v-text="item.title"></span><span
8174
class="date" v-text="item.date"></span></li>
@@ -92,9 +85,7 @@
9285
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;waitTime: 1000<br/>
9386
}
9487
</div>
95-
<my-class :data="listData4" :class-option="classOption4"
96-
@copy-data="listData4 = listData4.concat(listData4)"
97-
class="warp">
88+
<my-class :data="listData4" :class-option="classOption4" class="warp">
9889
<ul class="item">
9990
<li v-for="item in listData4"><span class="title" v-text="item.title"></span><span class="date"
10091
v-text="item.date"></span>

‎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.4",
3+
"version": "1.0.5",
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: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<template>
22
<div @mouseenter="enter" @mouseleave="leave" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
33
<div ref="wrapper" :style="pos">
4-
<slot></slot>
4+
<div ref="slotList">
5+
<slot></slot>
6+
</div>
7+
<div v-html="copyHtml"></div>
58
</div>
69
</div>
710
</template>
@@ -13,6 +16,7 @@
1316
return {
1417
yPos: 0,
1518
delay: 0,
19+
copyHtml: '',
1620
reqFrame: null
1721
}
1822
},
@@ -109,11 +113,12 @@
109113
_move () {
110114
this.reqFrame = requestAnimationFrame(
111115
() => {
112-
let timer
113-
let h = this.$refs.wrapper.offsetHeight / 2
114-
let direction = this.options.direction
116+
let h = this.$refs.wrapper.offsetHeight / 2 //实际高度
117+
let direction = this.options.direction //滚动方向
115118
if (direction === 1) {
116-
if (Math.abs(this.yPos) >= h) this.yPos = 0
119+
if (Math.abs(this.yPos) >= h) {
120+
this.yPos = 0
121+
}
117122
} else {
118123
if (this.yPos >= 0) this.yPos = h * -1
119124
}
@@ -122,8 +127,9 @@
122127
} else {
123128
this.yPos += this.options.step
124129
}
125-
if (!!this.options.singleHeight) {
126-
if (Math.abs(this.yPos) % this.options.singleHeight === 0) {
130+
if (!!this.options.singleHeight) { //是否启动了单行暂停配置
131+
if (Math.abs(this.yPos) % this.options.singleHeight === 0) { // 符合条件暂停waitTime
132+
let timer
127133
if (timer) clearTimeout(timer)
128134
timer = setTimeout(() => {
129135
this._move()
@@ -138,13 +144,21 @@
138144
)
139145
},
140146
_initMove () {
147+
this.copyHtml = '' //清空copy
141148
if (this.moveSwitch) {
142149
cancelAnimationFrame(this.reqFrame)
143150
this.yPos = 0
144151
} else {
145-
this.$emit('copy-data')
152+
let timer
153+
if (timer) clearTimeout(timer)
154+
timer = setTimeout(() => { //20ms作用保证能取到最新的html
155+
this.copyHtml = this.$refs.slotList.innerHTML
156+
}, 20)
146157
if (this.options.direction !== 1) {
147-
setTimeout(() => {
158+
//非向上滚动位置初始化
159+
let timer
160+
if (timer) clearTimeout(timer)
161+
timer = setTimeout(() => {
148162
this.yPos = this.$refs.wrapper.offsetHeight / 2 * -1
149163
}, 20)
150164
}
@@ -157,8 +171,9 @@
157171
},
158172
watch: {
159173
data (newData, oldData) {
174+
//监听data是否有变更
160175
if (!this.options.openWatch) return
161-
if (!arrayEqual(newData, oldData.concat(oldData))) {
176+
if (!arrayEqual(newData, oldData)) {
162177
cancelAnimationFrame(this.reqFrame)
163178
this._initMove()
164179
}

‎test/mobile-page.html

Lines changed: 0 additions & 133 deletions
This file was deleted.

‎test/test.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,7 @@
3131
</head>
3232
<body>
3333
<div id="app">
34-
<vue-seamless-scroll :data="listData" :class-option="classOption"
35-
@copy-data="listData = listData.concat(listData)"
36-
class="warp">
34+
<vue-seamless-scroll :data="listData" :class-option="classOption" class="warp">
3735
<ul class="item">
3836
<li v-for="item in listData"><span class="title" v-text="item.title"></span><span class="date"
3937
v-text="item.date"></span>

0 commit comments

Comments
 (0)
Please sign in to comment.