Skip to content

Commit

Permalink
add isSingleRemUnit(Configure)
Browse files Browse the repository at this point in the history 
增加singleHeight和singleWifth的rem度量开关配置项
  • Loading branch information
sos committed Apr 21, 2018
1 parent 78b5c61 commit 1a6af8b
Show file tree
Hide file tree
Showing 9 changed files with 55 additions and 67 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ Example:
|`switchSingleStep`|the size of a single step switch (px)|`134`|`Number`|
|`switchDelay`|the animation time of a single step switch(ms)|`400`|`Number`|
|`switchDisabledClass`|the className of the switch parent element that cannot be clicked|`disabled`|`String`|
|`isSingleRemUnit`|singleHeight and singleWidth Whether to enable the rem metric|`false`|`Boolean`|

## Individual special configuration items

Expand Down
26 changes: 18 additions & 8 deletions dist/vue-seamless-scroll.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -289,8 +289,8 @@ exports.default = {
autoPlay: true,
switchSingleStep: 134,
switchDelay: 400,
switchDisabledClass: 'disabled'
};
switchDisabledClass: 'disabled',
isSingleRemUnit: false };
},
options: function options() {
return copyObj({}, this.defaultOption, this.classOption);
Expand All @@ -306,6 +306,15 @@ exports.default = {
},
isHorizontal: function isHorizontal() {
return this.options.direction > 1 || !this.options.autoPlay;
},
baseFontSize: function baseFontSize() {
return this.options.isSingleRemUnit ? parseInt(window.getComputedStyle(document.documentElement, null).fontSize) : 1;
},
realSingleStopWidth: function realSingleStopWidth() {
return this.options.singleWidth * this.baseFontSize;
},
realSingleStopHeight: function realSingleStopHeight() {
return this.options.singleHeight * this.baseFontSize;
}
},
methods: {
Expand Down Expand Up @@ -425,16 +434,16 @@ exports.default = {
this.xPos += this.options.step;
}
if (this.singleWaitTime) clearTimeout(this.singleWaitTime);
if (!!this.options.singleHeight) {
if (Math.abs(this.yPos) % this.options.singleHeight === 0) {
if (!!this.realSingleStopHeight) {
if (Math.abs(this.yPos) % this.realSingleStopHeight === 0) {
this.singleWaitTime = setTimeout(function () {
_this3._move();
}, this.options.waitTime);
} else {
this._move();
}
} else if (!!this.options.singleWidth) {
if (Math.abs(this.xPos) % this.options.singleWidth === 0) {
} else if (!!this.realSingleStopWidth) {
if (Math.abs(this.xPos) % this.realSingleStopWidth === 0) {
this.singleWaitTime = setTimeout(function () {
_this3._move();
}, this.options.waitTime);
Expand All @@ -460,8 +469,9 @@ exports.default = {
} else {
rate = 2;
}
_this4.$refs.realBox.style.width = _this4.$refs.slotList.offsetWidth * rate + 'px';
_this4.realBoxWidth = _this4.$refs.slotList.offsetWidth * rate;
var w = _this4.$refs.slotList.offsetWidth * rate;
_this4.$refs.realBox.style.width = w + 'px';
_this4.realBoxWidth = w;
}
if (!_this4.options.autoPlay) {
_this4.ease = 'linear';
Expand Down
2 changes: 1 addition & 1 deletion dist/vue-seamless-scroll.min.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions document/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ Example:
|`switchSingleStep`|手动单步切换step值(px)|`134`|`Number`|
|`switchDelay`|单步切换的动画时间(ms)|`400`|`Number`|
|`switchDisabledClass`|不可以点击状态的switch按钮父元素的类名|`disabled`|`String`|
|`isSingleRemUnit`|singleHeight and singleWidth是否开启rem度量|`false`|`Boolean`|

## 个别特殊配置项说明

Expand Down
4 changes: 2 additions & 2 deletions examples/examples.bundle.js
View file

Large diffs are not rendered by default.

39 changes: 1 addition & 38 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,3 @@
<!--
´´´´´████████´´´´
´´`´███▒▒▒▒███´´´´´
´´´███▒●▒▒●▒██´´´
´´´███▒▒▒▒▒▒██´´´´´
´´´███▒▒▒▒██´ 技术栈：
´´██████▒▒███´´´´´ 语言： ES6-babel
´██████▒▒▒▒███´´ 框架： vue+vue-rouer
██████▒▒▒▒▒▒███´´´´ 构建工具： webpack
´´▓▓▓▓▓▓▓▓▓▓▓▓▓▒▓´´ 版本控制： git-github
´´▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒´´´´´ css预处理: sass
´.▒▒▒´´▓▓▓▓▓▓▓▓▓▓▓´´´´´ 代码风格：eslint-standard
..▒▒.´´´´▓▓▓▓▓▓▒ 编辑器： idea
´▒▒▒▒▒▒▒▒▒▒▒▒ 数据库: MongoDB （了解）
´´´´´´´´´███████´´´´ 服务器端脚本: nodejs (了解)
´´´´´´´´████████´´´´´´
´´´´´´´█████████´´´´´
´´´´´´██████████´´´
´´´´´´██████████´´
´´´´´´´█████████´
´´´´´´´█████████´
´´´´´´´´████████´´´
________▒▒▒▒▒
_________▒▒▒▒
_________▒▒▒▒
________▒▒_▒▒
_______▒▒__▒▒
_____ ▒▒___▒▒
_____▒▒___▒▒
____▒▒____▒▒
___▒▒_____▒▒
███____ ▒▒
████____███
█ _███_ _█_███
——————————————————————————女神保佑，代码无bug——————————————————————
-->
<!doctype html>
<html lang="en">
<head>
Expand All @@ -43,8 +7,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="description" content="A simple, Seamless scrolling for Vue.js">
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.6.1/tachyons.min.css"
integrity="sha256-eu1dpzpUytdOAUmB67Qi3mBb6HFjruP8BoAzk4lKiSc=" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css">
<body>
<div id="app"></div>
<script src="examples.bundle.js"></script>
Expand Down
8 changes: 5 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>A simple, Seamless scrolling for Vue.js</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A simple, Seamless scrolling for Vue.js">
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.6.1/tachyons.min.css"
integrity="sha256-eu1dpzpUytdOAUmB67Qi3mBb6HFjruP8BoAzk4lKiSc=" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.9.1/css/tachyons.min.css">

<body>
<div id="app"></div>
<script src="./examples/examples.bundle.js"></script>
</body>
</html>

</html>
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-seamless-scroll",
"version": "1.1.11",
"version": "1.1.12",
"description": "A simple, Seamless scrolling for Vue.js",
"main": "dist/vue-seamless-scroll.min.js",
"scripts": {
Expand Down
39 changes: 25 additions & 14 deletions src/components/myClass.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,8 @@
autoPlay: true,
switchSingleStep: 134,
switchDelay: 400,
switchDisabledClass: 'disabled'
switchDisabledClass: 'disabled',
isSingleRemUnit: false // singleWidth/singleHeight 是否开启rem度量
}
},
options () {
Expand All @@ -116,6 +117,15 @@
},
isHorizontal () {
return this.options.direction > 1 || !this.options.autoPlay
},
baseFontSize () {
return this.options.isSingleRemUnit ? parseInt(window.getComputedStyle(document.documentElement, null).fontSize) : 1
},
realSingleStopWidth () {
return this.options.singleWidth * this.baseFontSize
},
realSingleStopHeight () {
return this.options.singleHeight * this.baseFontSize
}
},
methods: {
Expand Down Expand Up @@ -143,7 +153,7 @@
touchStart (e) {
if (this.canNotTouch) return
let timer
let touch = e.targetTouches[0] //touches数组对象获得屏幕上所有的touch，取第一个touch
const touch = e.targetTouches[0] //touches数组对象获得屏幕上所有的touch，取第一个touch
this.startPos = {
x: touch.pageX,
y: touch.pageY
Expand All @@ -162,13 +172,13 @@
touchMove (e) {
//当屏幕有多个touch或者页面被缩放过，就不执行move操作
if (this.canNotTouch || e.targetTouches.length > 1 || e.scale && e.scale !== 1) return
let touch = e.targetTouches[0]
const touch = e.targetTouches[0]
this.endPos = {
x: touch.pageX - this.startPos.x,
y: touch.pageY - this.startPos.y
}
event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
let dir = Math.abs(this.endPos.x) < Math.abs(this.endPos.y) ? 1 : 0 //dir，1表示纵向滑动，0为横向滑动
const dir = Math.abs(this.endPos.x) < Math.abs(this.endPos.y) ? 1 : 0 //dir，1表示纵向滑动，0为横向滑动
if (dir === 1 && this.options.direction < 2) { // 表示纵向滑动 && 运动方向为上下
this.yPos = this.startPosY + this.endPos.y
} else if (dir === 0 && this.options.direction > 1) { // 为横向滑动 && 运动方向为左右
Expand All @@ -178,7 +188,7 @@
touchEnd () {
if (this.canNotTouch) return
let timer
let direction = this.options.direction
const direction = this.options.direction
this.delay = 50
if (direction === 1) {
if (this.yPos > 0) this.yPos = 0
Expand Down Expand Up @@ -216,9 +226,9 @@
this.reqFrame = requestAnimationFrame(
function () {
if (!this.$refs.realBox) return //fixed 路由之间切换报this.$refs.realBox.offsetHeigh undefined bug
let h = this.$refs.realBox.offsetHeight / 2 //实际高度
let w = this.$refs.slotList.offsetWidth //宽度
let direction = this.options.direction //滚动方向
const h = this.$refs.realBox.offsetHeight / 2 //实际高度
const w = this.$refs.slotList.offsetWidth //宽度
const direction = this.options.direction //滚动方向
if (direction === 1) { // 上
if (Math.abs(this.yPos) >= h) this.yPos = 0
this.yPos -= this.options.step
Expand All @@ -233,16 +243,16 @@
this.xPos += this.options.step
}
if (this.singleWaitTime) clearTimeout(this.singleWaitTime)
if (!!this.options.singleHeight) { //是否启动了单行暂停配置
if (Math.abs(this.yPos) % this.options.singleHeight === 0) { // 符合条件暂停waitTime
if (!!this.realSingleStopHeight) { //是否启动了单行暂停配置
if (Math.abs(this.yPos) % this.realSingleStopHeight === 0) { // 符合条件暂停waitTime
this.singleWaitTime = setTimeout(() => {
this._move()
}, this.options.waitTime)
} else {
this._move()
}
} else if (!!this.options.singleWidth) {
if (Math.abs(this.xPos) % this.options.singleWidth === 0) { // 符合条件暂停waitTime
} else if (!!this.realSingleStopWidth) {
if (Math.abs(this.xPos) % this.realSingleStopWidth === 0) { // 符合条件暂停waitTime
this.singleWaitTime = setTimeout(() => {
this._move()
}, this.options.waitTime)
Expand All @@ -267,8 +277,9 @@
} else {
rate = 2
}
this.$refs.realBox.style.width = this.$refs.slotList.offsetWidth * rate + 'px'
this.realBoxWidth = this.$refs.slotList.offsetWidth * rate
const w = this.$refs.slotList.offsetWidth * rate
this.$refs.realBox.style.width = w + 'px'
this.realBoxWidth = w
}
if (!this.options.autoPlay) {
this.ease = 'linear'
Expand Down

0 comments on commit 1a6af8b

Please sign in to comment.