This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

Merge branch 'master' of github.com:yutent/doui

old
宇天 2017-11-08 23:35:58 +08:00
parent 4736e6b118 b13b8573b9
commit 442707471b
8 changed files with 803 additions and 793 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -2,3 +2,5 @@
*.min.css *.min.css
index.html index.html
.vscode .vscode
dist.sublime-project
dist.sublime-workspace

927
js/lib/request/es5.js
View File

File diff suppressed because it is too large Load Diff

314
js/lib/request/promise.js
View File

@ -5,233 +5,219 @@
* *
*/ */
"use strict"; 'use strict';
define(function(){ define(function() {
var _Promise = function(callback) {
this.callback = [];
var _this = this;
var _Promise = function(callback){ if (typeof this !== 'object')
this.callback = [] throw new TypeError('Promises must be constructed via new');
var _this = this
if(typeof this !== 'object') if (typeof callback !== 'function')
throw new TypeError('Promises must be constructed via new') throw new TypeError('Argument must be a function');
if(typeof callback !== 'function') callback(
throw new TypeError('Argument must be a function') function(val) {
_resolve(_this, val);
callback(function(val){ },
_resolve(_this, val) function(val) {
}, function(val){ _reject(_this, val);
_reject(_this, val) }
}) );
} };
var self = { var self = {
_state: 1, _state: 1,
_fired: 1, _fired: 1,
_val: 1, _val: 1,
callback: 1 callback: 1
} };
_Promise.prototype = { _Promise.prototype = {
constructor: _Promise, constructor: _Promise,
_state: 'pending', _state: 'pending',
_fired: false, _fired: false,
_fire: function(yes, no){ _fire: function(yes, no) {
if(this._state === 'rejected'){ if (this._state === 'rejected') {
if(typeof no === 'function') if (typeof no === 'function') no(this._val);
no(this._val) else throw this._val;
else } else {
throw this._val if (typeof yes === 'function') yes(this._val);
}else{
if(typeof yes === 'function')
yes(this._val)
} }
}, },
_then: function(yes, no){ _then: function(yes, no) {
if(this._fired){ if (this._fired) {
var _this = this var _this = this;
fireCallback(_this, function(){ fireCallback(_this, function() {
_this._fire(yes, no) _this._fire(yes, no);
}) });
}else{ } else {
this.callback.push({yes: yes, no: no}) this.callback.push({ yes: yes, no: no });
} }
}, },
then: function(yes, no){ then: function(yes, no) {
yes = typeof yes === 'function' ? yes : _yes yes = typeof yes === 'function' ? yes : _yes;
no = typeof no === 'function' ? no : _no no = typeof no === 'function' ? no : _no;
var _this = this var _this = this;
var next = new _Promise(function(resolve, reject){ var next = new _Promise(function(resolve, reject) {
_this._then(
_this._then(function(val){ function(val) {
try{ try {
val = yes(val) val = yes(val);
}catch(err){ } catch (err) {
return reject(err) return reject(err);
} }
}, function(val){ },
try{ function(val) {
val = no(val) try {
}catch(err){ val = no(val);
return reject(err) } catch (err) {
return reject(err);
} }
resolve(val) resolve(val);
}) }
}) );
for(var i in _this){ });
if(!self[i]) for (var i in _this) {
next[i] = _this[i] if (!self[i]) next[i] = _this[i];
} }
return next return next;
}, },
done: done, done: done,
catch: fail, catch: fail,
fail: fail fail: fail
};
_Promise.all = function(arr) {
return _some(false, arr);
};
_Promise.race = function(arr) {
return _some(true, arr);
};
_Promise.defer = defer;
// -----------------------------------------------------------
function _yes(val) {
return val;
} }
_Promise.all = function(arr){ function _no(err) {
return _some(false, arr) throw err;
} }
_Promise.race = function(arr){ function done(callback) {
return _some(true, arr) return this.then(callback, _no);
} }
_Promise.defer = defer function fail(callback) {
return this.then(_yes, callback);
// -----------------------------------------------------------
function _yes(val){
return val
} }
function _no(err){ function defer() {
throw err var obj = {};
obj.promise = new this(function(yes, no) {
obj.resolve = yes;
obj.reject = no;
});
return obj;
} }
function done(callback){
return this.then(callback, _no)
}
function fail(callback){
return this.then(_yes, callback)
}
function defer(){
var obj = {}
obj.promise = new this(function(yes, no){
obj.resolve = yes
obj.reject = no
})
return obj
}
//成功的回调 //成功的回调
function _resolve(obj, val){ function _resolve(obj, val) {
if(obj._state !== 'pending') if (obj._state !== 'pending') return;
return
if(val && typeof val.then === 'function'){ if (val && typeof val.then === 'function') {
var method = val instanceof _Promise ? '_then' : 'then' var method = val instanceof _Promise ? '_then' : 'then';
val[method](function(v){ val[method](
_transmit(obj, v, true) function(v) {
}, function(v){ _transmit(obj, v, true);
_transmit(obj, v, false) },
}) function(v) {
}else{ _transmit(obj, v, false);
_transmit(obj, val, true) }
);
} else {
_transmit(obj, val, true);
} }
} }
//失败的回调 //失败的回调
function _reject(obj, val){ function _reject(obj, val) {
if(obj._state !== 'pending') if (obj._state !== 'pending') return;
return
_transmit(obj, val, false) _transmit(obj, val, false);
} }
// 改变Promise的_fired值，并保持用户传参，触发所有回调 // 改变Promise的_fired值，并保持用户传参，触发所有回调
function _transmit(obj, val, isResolved){ function _transmit(obj, val, isResolved) {
obj._fired = true obj._fired = true;
obj._val = val obj._val = val;
obj._state = isResolved ? 'fulfilled' : 'rejected' obj._state = isResolved ? 'fulfilled' : 'rejected';
fireCallback(obj, function(){ fireCallback(obj, function() {
for(var i in obj.callback){ for (var i in obj.callback) {
obj._fire(obj.callback[i].yes, obj.callback[i].no) obj._fire(obj.callback[i].yes, obj.callback[i].no);
} }
}) });
} }
function fireCallback(obj, callback) {
var isAsync = false;
function fireCallback(obj, callback){ if (typeof obj.async === 'boolean') isAsync = obj.async;
var isAsync = false else isAsync = obj.async = true;
if(typeof obj.async === 'boolean') if (isAsync) setTimeout(callback, 0);
isAsync = obj.async else callback();
else
isAsync = obj.async = true
if(isAsync)
setTimeout(callback, 0)
else
callback()
} }
function _some(bool, iterable) {
iterable = Array.isArray(iterable) ? iterable : [];
function _some(bool, iterable){ var n = 0;
iterable = Array.isArray(iterable) ? iterable : [] var res = [];
var end = false;
var n = 0 return new _Promise(function(yes, no) {
var res = [] if (!iterable.length) no(res);
var end = false
return new _Promise(function(yes, no){ function loop(obj, idx) {
if(!iterable.length) obj.then(
no(res) function(val) {
if (!end) {
function loop(obj, idx){ res[idx] = val;
obj.then(function(val){ n++;
if(!end){ if (bool || n >= iterable.length) {
res[idx] = val yes(bool ? val : res);
n++ end = true;
if(bool || n >= iterable.length){ }
yes(bool ? val : res)
end = true
} }
},
function(val) {
end = true;
no(val);
} }
}, function(val){ );
end = true
no(val)
})
} }
for(var i = 0, len = iterable.length; i < len; i++){ for (var i = 0, len = iterable.length; i < len; i++) {
loop(iterable[i], i) loop(iterable[i], i);
} }
}) });
} }
// ---------------------------------------------------------------
// --------------------------------------------------------------- var nativePromise = window.Promise;
if (/native code/.test(nativePromise)) {
nativePromise.prototype.done = done;
var nativePromise = window.Promise nativePromise.prototype.fail = fail;
if(/native code/.test(nativePromise)){ if (!nativePromise.defer) nativePromise.defer = defer;
nativePromise.prototype.done = done
nativePromise.prototype.fail = fail
if(!nativePromise.defer)
nativePromise.defer = defer
} }
return window.Promise = nativePromise || _Promise return (window.Promise = nativePromise || _Promise);
});
})

16
js/lib/sliders/Readme.md
View File

@ -4,16 +4,16 @@
```json ```json
{ {
sliderList: [{src: '', link: '', title: '', titleStyle: ''}], //src: 图片地址; link: 点击链接; title: 幻灯片标题(可以是文本或html); titleStyle: 标题样式 sliderList: [{src: '', title: '', link: '', elm: ''}], //src: 图片地址; link: 点击链接; title: 幻灯片标题(可以是文本或html); elm: 幻灯片中的dom元素
autoSlide: boolean, //true: 自动轮播; false: 停止轮播 autoSlide: boolean, //true: 自动轮播; false: 停止轮播
time: int, //轮播间隔时间 time: int, //自动轮播间隔时间
preview: boolean //是否缩略有图 preview: boolean //是否缩略有图(不适用于全屏)
skin: 'skin-2', //4种,默认0(0,1,2,3) skin: int, //4种,默认0(0,1,2,3)
sliderType: int, //幻灯片动画效果,目前有1: 水平滑动;2: 水平渐进渐出;3: 垂直滑动;4: 垂直渐进渐出
$onSuccess: function(vm){ $onSuccess: function(vm){
slider = vm slider = vm
}, //初始化回调 }, //初始化回调
vm.$setSliderList(list), //赋值数据给幻灯片数组 vm.$setSliderList(list), //赋值数据给幻灯片数组
vm.$setSliderType(type) //type改变幻灯片动画效果,目前有1: 滑动;2: 渐进渐出
} }
``` ```
@ -40,8 +40,10 @@ name属性可以设定组件的$id值，方便各模块之间进行通讯
sliderList: [{src: '', link: '', title: '', elm: ''}], sliderList: [{src: '', link: '', title: '', elm: ''}],
autoSlide: false, autoSlide: false,
time: 0, time: 0,
preview: true // preview: true,
skin: 'skin-2', fullScreen: true,
skin: 1,
sliderType: 4,
$onSuccess: function(vm){ $onSuccess: function(vm){
slider = vm slider = vm
slider.$setSliderList(list) slider.$setSliderList(list)

2
js/lib/sliders/main.css
View File

@ -1 +1 @@
.do-sliders{position:relative;height:100%;width:100%}.do-sliders .slider-content{height:80%;position:relative}.do-sliders .slider-content .container{position:relative;height:100%;overflow:hidden}.do-sliders .slider-content .container .box{position:relative;height:100%;width:100%;transition:.4s}.do-sliders .slider-content .container .box a{position:relative;display:inline-block;height:100%;vertical-align:middle;transition:.4s}.do-sliders .slider-content .container .box a img{width:100%;height:100%;object-fit:cover}.do-sliders .slider-content .container .box a .title-class{position:absolute;width:30%;min-height:30px;line-height:30px;left:0;bottom:15%;right:0;margin:auto;text-align:center;font-size:25px}.do-sliders .slider-content .container .box a .elm{height:100%;width:100%;background:#333}.do-sliders .slider-content .container .box a .default-elm{width:100%;height:100%}.do-sliders .slider-content .container .box .fadeType{position:absolute;left:0;top:0;width:100%}.do-sliders .slider-content .slider-btn{position:absolute;top:50%;min-width:50px;min-height:50px;margin-top:-25px;text-decoration:none;font-size:30px;line-height:50px;text-align:center;border-radius:100%;color:rgba(255,255,255,0.6);font-weight:bold;z-index:1;transition:.4s}.do-sliders .slider-content .slider-btn:nth-of-type(1){margin-left:20px}.do-sliders .slider-content .slider-btn:nth-of-type(2){right:0;margin-right:20px}.do-sliders .slider-preview-btn{position:relative;bottom:-5%;height:15%;width:100%;margin:0 auto;text-align:center;overflow:hidden}.do-sliders .slider-preview-btn span{display:inline-block;width:10px;height:10px;margin:20px 5px;border-radius:100%;background:rgba(255,255,255,0.8);cursor:pointer;transition:.5s}.do-sliders .slider-preview-btn span:hover{background:#1abc9c}.do-sliders .slider-preview-btn .no-preview-act{background:#16a085}.do-sliders .slider-preview-btn .btn-group{height:100%}.do-sliders .slider-preview-btn .btn-img{display:inline-block;position:relative;width:80px;height:100%;margin:0 5px;transition:.4s;cursor:pointer}.do-sliders .slider-preview-btn .btn-img img{position:relative;width:100%;height:100%;object-fit:cover;transition:.4s;z-index:2}.do-sliders .slider-preview-btn .btn-img .preview-act{transform:scale(0.95)}.do-sliders .slider-preview-btn .btn-img .btn-background{content:'';position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:.8s;z-index:1}.do-sliders .slider-preview-btn .btn-img.act .btn-background{opacity:1}.do-sliders.skin-0 .title-class{color:#fff}.do-sliders.skin-1 .title-class{color:#c54133}.do-sliders.skin-2 .title-class{color:#16a085}.do-sliders.skin-3 .title-class{color:#2c81ba}.do-sliders.skin-0 .slider-btn{color:rgba(255,255,255,0.6)}.do-sliders.skin-1 .slider-btn{color:#c54133}.do-sliders.skin-2 .slider-btn{color:#16a085}.do-sliders.skin-3 .slider-btn{color:#2c81ba}.do-sliders.skin-0 .slider-btn:hover{color:#fff}.do-sliders.skin-1 .slider-btn:hover{color:#e74c3c}.do-sliders.skin-2 .slider-btn:hover{color:#1abc9c}.do-sliders.skin-3 .slider-btn:hover{color:#3498db}.do-sliders.skin-0 .btn-img .btn-background{background:rgba(0,0,0,0.5)}.do-sliders.skin-1 .btn-img .btn-background{background:#e74c3c}.do-sliders.skin-2 .btn-img .btn-background{background:#1abc9c}.do-sliders.skin-3 .btn-img .btn-background{background:#3498db}.do-sliders.skin-0 .default-elm{background:#fff}.do-sliders.skin-1 .default-elm{background:#e74c3c}.do-sliders.skin-2 .default-elm{background:#1abc9c}.do-sliders.skin-3 .default-elm{background:#3498db}.do-sliders .h-80{height:80%}.do-sliders .h-100{height:100%}@keyframes right-to-left{49%{-webkit-transform:translate(100%)}50%{-webkit-transform:translate(-100%);opacity:0}100%{opacity:1}}@keyframes left-to-right{49%{-webkit-transform:translate(-100%)}50%{-webkit-transform:translate(100%);opacity:0}100%{opacity:1}} .do-sliders{position:relative;height:100%;width:100%}.do-sliders .skin{height:100%}.do-sliders.fullscreen{position:absolute;width:100%;height:100%;left:0;top:0}.do-sliders .slider-content{position:relative}.do-sliders .slider-content .container{position:relative;height:100%;overflow:hidden}.do-sliders .slider-content .container .box{position:relative;height:100%;width:100%;transition:.4s}.do-sliders .slider-content .container .box .page{position:relative;display:inline-block;height:100%;vertical-align:middle}.do-sliders .slider-content .container .box .page img{width:100%;height:100%;object-fit:cover}.do-sliders .slider-content .container .box .page .title-class{position:absolute;width:30%;min-height:30px;line-height:30px;left:0;bottom:15%;right:0;margin:auto;text-align:center;font-size:25px}.do-sliders .slider-content .container .box .page .elm{height:100%;width:100%;background:#333}.do-sliders .slider-content .container .box .page .default-elm{width:100%;height:100%}.do-sliders .slider-content .container .box .page .default-btn{width:100%;height:100%}.do-sliders .slider-content .container .box .fadeType{position:absolute;left:0;top:0;width:100%;transition:.4s}.do-sliders .slider-content .slider-btn{position:absolute;top:50%;min-width:50px;min-height:50px;margin-top:-25px;text-decoration:none;font-size:30px;line-height:50px;text-align:center;border-radius:100%;color:rgba(255,255,255,0.6);font-weight:bold;z-index:1;transition:.4s}.do-sliders .slider-content .slider-btn:nth-of-type(1){margin-left:20px}.do-sliders .slider-content .slider-btn:nth-of-type(2){right:0;margin-right:20px}.do-sliders .slider-preview-btn{position:absolute;bottom:2%;height:12%;width:100%;margin:0 auto;text-align:center;overflow:hidden}.do-sliders .slider-preview-btn span{display:inline-block;width:10px;height:10px;margin:0 5px;border-radius:100%;background:rgba(255,255,255,0.8);cursor:pointer;transition:.5s}.do-sliders .slider-preview-btn span:hover{background:#4caf50}.do-sliders .slider-preview-btn .no-preview-act{background:#388e3c}.do-sliders .slider-preview-btn .btn-group{height:100%}.do-sliders .slider-preview-btn .btn-img{display:inline-block;position:relative;width:80px;height:100%;margin:0 5px;transition:.4s;cursor:pointer}.do-sliders .slider-preview-btn .btn-img img{position:relative;width:100%;height:100%;object-fit:cover;transition:.4s;z-index:2}.do-sliders .slider-preview-btn .btn-img .preview-act{transform:scale(0.95)}.do-sliders .slider-preview-btn .btn-img:after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:.8s;z-index:1}.do-sliders .slider-preview-btn .btn-img.act:after{opacity:1}.do-sliders .slider-preview-btn-vertical{right:10px;bottom:50%;width:20px;height:auto;text-align:center;transform:translate(0, 50%)}.do-sliders .skin-0 .title-class{color:#e0e0e0}.do-sliders .skin-1 .title-class{color:#e64a19}.do-sliders .skin-2 .title-class{color:#388e3c}.do-sliders .skin-3 .title-class{color:#1976d2}.do-sliders .skin-0 .slider-btn{color:rgba(255,255,255,0.6)}.do-sliders .skin-1 .slider-btn{color:#e64a19}.do-sliders .skin-2 .slider-btn{color:#388e3c}.do-sliders .skin-3 .slider-btn{color:#1976d2}.do-sliders .skin-0 .slider-btn:hover{color:#e0e0e0}.do-sliders .skin-1 .slider-btn:hover{color:#ff5722}.do-sliders .skin-2 .slider-btn:hover{color:#4caf50}.do-sliders .skin-3 .slider-btn:hover{color:#2196f3}.do-sliders .skin-0 .btn-img:after{background:rgba(0,0,0,0.5)}.do-sliders .skin-1 .btn-img:after{background:#ff5722}.do-sliders .skin-2 .btn-img:after{background:#4caf50}.do-sliders .skin-3 .btn-img:after{background:#2196f3}.do-sliders .skin-0 .default-elm{background:#e0e0e0}.do-sliders .skin-1 .default-elm{background:#ff5722}.do-sliders .skin-2 .default-elm{background:#4caf50}.do-sliders .skin-3 .default-elm{background:#2196f3}.do-sliders .skin-0 .default-btn{background:#e0e0e0}.do-sliders .skin-1 .default-btn{background:#ff5722}.do-sliders .skin-2 .default-btn{background:#4caf50}.do-sliders .skin-3 .default-btn{background:#2196f3}.do-sliders .skin-0 .no-preview-act{background:rgba(0,0,0,0.6)}.do-sliders .skin-1 .no-preview-act{background:#e64a19}.do-sliders .skin-2 .no-preview-act{background:#388e3c}.do-sliders .skin-3 .no-preview-act{background:#1976d2}.do-sliders .skin-0 .slider-preview-btn span:hover{background:rgba(0,0,0,0.6)}.do-sliders .skin-1 .slider-preview-btn span:hover{background:#e64a19}.do-sliders .skin-2 .slider-preview-btn span:hover{background:#388e3c}.do-sliders .skin-3 .slider-preview-btn span:hover{background:#1976d2}.do-sliders .h-83{height:83%}.do-sliders .h-100{height:100%}@keyframes right-to-left{49%{-webkit-transform:translate(100%)}50%{-webkit-transform:translate(-100%);opacity:0}100%{opacity:1}}@keyframes left-to-right{49%{-webkit-transform:translate(-100%)}50%{-webkit-transform:translate(100%);opacity:0}100%{opacity:1}}

143
js/lib/sliders/main.htm
View File

@ -1,64 +1,95 @@
<div class="do-sliders" :class="{{skin}}"> <div class="do-sliders" :class="{fullscreen: fullScreen}">
12 <div class="skin" :class="{{skin}}">
<div class="slider-content" :class="{'h-100': !preview}" :class="{'h-80': preview}" :if="sliderList.length" :mouseenter="$stopSlide()" :mouseleave="$startSlide()">
<a class="do-ui-font slider-btn" href="javascript:;"
:click="$go(-1)">&#xe8ed</a>
<div class="container"> <div class="slider-content" :class="{'h-83': preview && !fullScreen, 'h-100': !preview || fullScreen}" :if="sliderList.length" :mouseenter="$stopSlide()" :mouseleave="$startSlide()">
<div class="box" <a class="do-ui-font slider-btn" href="javascript:;"
:if="sliderType == 1" :if="sliderType < 3"
:css="{width: sliderList.length * 100 + '%', transform: animation}"> :click="$go(-1)">&#xe8ed</a>
<a target="_blank"
:repeat="sliderList" <div class="container">
:css="{width: currWidth}" <div class="box"
:attr="{href: el.link || 'javascript:;'}"> :if="sliderType == 1"
<img :if="el.src && el.src != ''" :attr-src="el.src"> :css="{width: sliderList.length * 100 + '%', transform: animation}">
<div class="default-elm" :class="{elm: !el.elm && !el.src, 'preview-act': curr === $index || (curr >= maxNum && $index == maxNum - 1)}" :if="!el.src" :html="el.elm ? el.elm : ''"></div> <a class="page" target="_blank"
<p :if="el.title" :repeat="sliderList"
:html="el.title" :css="{width: currWidth + '%'}"
class="title-class"></p> :attr="{href: el.link || 'javascript:;'}">
</a> <img :if="el.src && el.src != ''" :attr-src="el.src">
</div> <p :if="el.title"
<div class="box" :html="el.title"
:if="sliderType == 2"> class="title-class"></p>
<a target="_blank" </a>
class="fadeType" </div>
:repeat="sliderList" <div class="box"
:css="{opacity: curr != $index ? 0 : 1}" :if="sliderType == 2">
:attr="{href: el.link || 'javascript:;'}"> <a target="_blank"
<img :if="el.src && el.src != ''" :attr-src="el.src"> class="page fadeType"
<div class="default-elm" :class="{elm: !el.elm && !el.src, 'preview-act': curr === $index || (curr >= maxNum && $index == maxNum - 1)}" :if="!el.src" :html="el.elm ? el.elm : ''"></div> :repeat="sliderList"
<p :if="el.title" :css="{opacity: curr != $index ? 0 : 1}"
:html="el.title" :attr="{href: el.link || 'javascript:;'}">
class="title-class"></p> <img :if="el.src && el.src != ''" :attr-src="el.src">
</a>
<p :if="el.title"
:html="el.title"
class="title-class"></p>
</a>
</div>
<div class="box"
:if="sliderType == 3"
:css="{height: sliderList.length * 100 + '%', transform: animation}">
<a class="page" target="_blank"
:repeat="sliderList"
:css="{width: '100%', height: (100 / sliderList.length) + '%'}"
:attr="{href: el.link || 'javascript:;'}">
<img :if="el.src && el.src != ''" :attr-src="el.src">
<p :if="el.title"
:html="el.title"
class="title-class"></p>
</a>
</div>
<div class="box"
:if="sliderType == 4">
<a target="_blank"
class="page fadeType"
:repeat="sliderList"
:css="{opacity: curr != $index ? 0 : 1}"
:attr="{href: el.link || 'javascript:;'}">
<img :if="el.src && el.src != ''" :attr-src="el.src">
{{el.elm | html}}
<p :if="el.title"
:html="el.title"
class="title-class"></p>
</a>
</div>
</div> </div>
<a class="do-ui-font slider-btn" href="javascript:;"
:if="sliderType < 3"
:click="$go(1)">&#xe8eb</a>
</div> </div>
<a class="do-ui-font slider-btn" href="javascript:;"
:click="$go(1)">&#xe8eb</a>
</div>
<div class="slider-preview-btn"
:class="{'slider-preview-btn-vertical': sliderType > 2}"
:css="{padding: !preview && sliderType < 3 ? '2%' : ''}" >
<span href="javascript:;"
:if="!preview || fullScreen"
:class="{'no-preview-act': curr === $index}"
:repeat="sliderList"
:click="$jump($index)">
</span>
<div class="slider-preview-btn" <a class="btn-img" href="javascript:;"
:css="{bottom: preview ? '-5%' : '15%'}" > :if="preview && !fullScreen"
<span :if="!preview" :class="{act: curr === $index || (curr >= maxNum && $index == maxNum - 1), 'default-btn': !el.src}"
href="javascript:;" :click="$jump($index)"
:class="{'no-preview-act': curr === $index}" :repeat="sliderBtnList">
:repeat="sliderList" <img
:click="$jump($index)"> :class="{'preview-act': curr === $index || (curr >= maxNum && $index == maxNum - 1)}"
</span> :if="el.src && el.src != ''"
:attr-src="el.src" />
<a class="btn-img" href="javascript:;" <div class="btn-background" ms-if="el.src"></div>
:if="preview" </a>
:class="{act: curr === $index || (curr >= maxNum && $index == maxNum - 1)}" </div>
:click="$jump($index)"
:repeat="sliderBtnList">
<img
:class="{'preview-act': curr === $index || (curr >= maxNum && $index == maxNum - 1)}"
:if="el.src && el.src != ''"
:attr-src="el.src" />
<div class="btn-background"></div>
</a>
</div> </div>
</div> </div>

104
js/lib/sliders/main.js
View File

@ -7,16 +7,19 @@
define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
var dom; var dom;
function getWidth(){} var sliderNum = 0;
var skin = ['skin-0','skin-1','skin-2','skin-3']
/** /**
* [根据当前幻灯片索引获取填充底下按钮数据] * [根据当前幻灯片索引获取填充底下按钮数据]
* @param {Object} vm [vm对象] * @param {Object} vm [vm对象]
* @return {[Array]} [填充到按钮的数据] * @return {[Array]} [填充到按钮的数据]
*/ */
function getBtnList(vm){ function getBtnList(vm, el){
var currWidth = vm.currWidth.slice(0, -2) if(el){
vm.maxNum = Math.floor(currWidth / 130) dom = el
}
vm.maxNum = Math.floor(dom.offsetWidth / 90)
var curr = vm.curr + 1 var curr = vm.curr + 1
let res = [] let res = []
if(!vm.preview) if(!vm.preview)
@ -43,7 +46,7 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
vm.timer = setTimeout(function(){ vm.timer = setTimeout(function(){
vm.$go(1) vm.$go(1)
autoSlide(vm) autoSlide(vm)
}, vm.time) }, vm.time <= 0 ? 3000 : vm.time)
} }
return yua.component("sliders", { return yua.component("sliders", {
@ -84,60 +87,53 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
vm.sliderList.pushArray(list) vm.sliderList.pushArray(list)
} }
vm.$setSliderType = function(type){
vm.sliderType = type
yua.log(vm.sliderType)
}
vm.$watch('curr', function(val, old) {
vm.currWidth = getWidth()
var width
if(vm.currWidth.indexOf('px') > -1)
width = vm.currWidth.slice(0, vm.currWidth.indexOf('px'))
vm.animation = 'translate(' + (-width * val) + 'px, 0)'
if(vm.preview && vm.maxNum < vm.sliderList.length){
vm.sliderBtnList.removeAll()
vm.sliderBtnList.pushArray(getBtnList(vm))
}
})
window.addEventListener('resize', function(){
vm.currWidth = getWidth()
var width
if(vm.currWidth.indexOf('px') > -1)
width = vm.currWidth.slice(0, vm.currWidth.indexOf('px'))
vm.animation = 'translate(' + (-width * vm.curr) + 'px, 0)'
if(vm.preview && vm.maxNum < vm.sliderList.length){
yua.log(vm.maxNum , vm.sliderList.length)
vm.sliderBtnList.removeAll()
vm.sliderBtnList.pushArray(getBtnList(vm))
}
}, false)
vm.$onSuccess(vm) vm.$onSuccess(vm)
}, },
$ready: function(vm){ $ready: function(vm, el){
dom = document.querySelector('.do-sliders') vm.skin = skin[vm.skin]
vm.currWidth = (100 / vm.sliderList.length)
/**
* [获取当前幻灯片元素宽度]
*/
getWidth = function(){
return window.getComputedStyle ? window.getComputedStyle(dom).width : dom.offsetWidth + 'px'
}
vm.currWidth = getWidth()
if(vm.autoSlide) if(vm.autoSlide)
autoSlide(vm) autoSlide(vm)
if(vm.preview){ if(vm.preview){
vm.sliderBtnList.removeAll() vm.sliderBtnList.removeAll()
vm.sliderBtnList.pushArray(getBtnList(vm)) vm.sliderBtnList.pushArray(getBtnList(vm, el))
}
vm.$watch('curr', function(val, old) {
vm.animation = vm.sliderType > 2 ? 'translate(0, ' + (-vm.currWidth * val) + '%)' : 'translate(' + (-vm.currWidth * val) + '%, 0)'
if(vm.preview && vm.maxNum < vm.sliderList.length){
vm.sliderBtnList.removeAll()
vm.sliderBtnList.pushArray(getBtnList(vm, el))
}
})
window.addEventListener('resize', function(){
vm.animation = vm.sliderType > 2 ? 'translate(0, ' + (-vm.currWidth * vm.curr) + '%)' : 'translate(' + (-vm.currWidth * vm.curr) + '%, 0)'
if(vm.preview && vm.maxNum < vm.sliderList.length){
vm.sliderBtnList.removeAll()
vm.sliderBtnList.pushArray(getBtnList(vm, el))
}
}, false)
if(vm.sliderType >= 3){
var now = 0
var mouseWheelEv = /Firefox/i.test(navigator.userAgent) ? "DOMMouseScroll": "mousewheel"
var direction = /Firefox/i.test(navigator.userAgent) ? "detail": "deltaY"
window.addEventListener(mouseWheelEv, function(ev){
if(Date.now() - now > 500 || now == 0){
if(ev[direction] > 0){
vm.$go(1)
}else{
vm.$go(-1)
}
now = Date.now()
}
}, false)
} }
yua.log(vm)
}, },
currWidth: 0, currWidth: 0,
animation: '', animation: '',
@ -150,12 +146,12 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
sliderList: [], sliderList: [],
autoSlide: '', autoSlide: '',
time: 3000, time: 3000,
preview: true, preview: false,
skin: 'skin-0', skin: 0,
fullScreen: false,
$onSuccess: yua.noop, $onSuccess: yua.noop,
$setSliderList: yua.noop, $setSliderList: yua.noop,
$setSliderType: yua.noop,
$jump: yua.noop, $jump: yua.noop,
$stopSlide: yua.noop, $stopSlide: yua.noop,
$startSlide: yua.noop, $startSlide: yua.noop,

76
js/lib/sliders/main.scss
View File

@ -10,17 +10,20 @@
// @import "../../../css/reset.scss"; // @import "../../../css/reset.scss";
.do-sliders {position: relative;height: 100%;width: 100%; .do-sliders {position: relative;height: 100%;width: 100%;
.slider-content{height: 80%;position: relative; .skin{height: 100%}
&.fullscreen{position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
.slider-content{position: relative;
.container {position: relative;height: 100%;overflow: hidden; .container {position: relative;height: 100%;overflow: hidden;
.box {position: relative;height: 100%;width: 100%;transition: .4s; .box {position: relative;height: 100%;width: 100%;transition: .4s;
a {position:relative;display: inline-block;height: 100%;vertical-align: middle;transition: .4s; .page {position:relative;display: inline-block;height: 100%;vertical-align: middle;
img {width: 100%;height: 100%;object-fit: cover;} img {width: 100%;height: 100%;object-fit: cover;}
.title-class {position: absolute;width: 30%;min-height: 30px;line-height: 30px;left: 0;bottom: 15%;right: 0;margin: auto;text-align: center;font-size: 25px;} .title-class {position: absolute;width: 30%;min-height: 30px;line-height: 30px;left: 0;bottom: 15%;right: 0;margin: auto;text-align: center;font-size: 25px;}
.elm{height: 100%;width: 100%;background: #333;} .elm{height: 100%;width: 100%;background: #333;}
.default-elm{width: 100%;height: 100%;} .default-elm{width: 100%;height: 100%;}
.default-btn{width: 100%;height: 100%;}
} }
.fadeType{position: absolute;left: 0;top: 0;width: 100%;} .fadeType{position: absolute;left: 0;top: 0;width: 100%;transition: .4s;}
} }
} }
@ -32,10 +35,9 @@
// .slider-btn:nth-of-type(2):hover{animation: right-to-left .3s;} // .slider-btn:nth-of-type(2):hover{animation: right-to-left .3s;}
} }
.slider-preview-btn {position: absolute;bottom: 2%;height: 12%;width: 100%;margin: 0 auto;text-align: center;overflow: hidden;
.slider-preview-btn {position: relative;bottom: -5%;height: 15%;width: 100%;margin: 0 auto;text-align: center;overflow: hidden; span {display: inline-block;width: 10px;height: 10px;margin: 0 5px;border-radius: 100%;background: rgba(255,255,255,0.8);cursor: pointer;transition: .5s;}
span {display: inline-block;width: 10px;height: 10px;margin: 20px 5px;border-radius: 100%;background: rgba(255,255,255,0.8);cursor: pointer;transition: .5s;}
span:hover{background:nth($cg, 1);} span:hover{background:nth($cg, 1);}
.no-preview-act{background:nth($cg, 3);} .no-preview-act{background:nth($cg, 3);}
@ -45,36 +47,52 @@
img {position: relative;width: 100%;height: 100%;object-fit: cover;transition: .4s;z-index: 2;} img {position: relative;width: 100%;height: 100%;object-fit: cover;transition: .4s;z-index: 2;}
.preview-act{transform: scale(.95)} .preview-act{transform: scale(.95)}
} }
.btn-img .btn-background {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;transition: .8s;z-index: 1;} .btn-img:after {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;transition: .8s;z-index: 1;}
.btn-img.act .btn-background {opacity: 1;} .btn-img.act:after {opacity: 1;}
} }
.slider-preview-btn-vertical{right: 10px;bottom: 50%;width: 20px;height: auto;text-align: center;transform: translate(0, 50%);}
&.skin-0 .title-class{color: #fff} .skin-0 .title-class{color: #e0e0e0}
&.skin-1 .title-class{color: nth($cr, 3)} .skin-1 .title-class{color: nth($cr, 3)}
&.skin-2 .title-class{color: nth($cg, 3)} .skin-2 .title-class{color: nth($cg, 3)}
&.skin-3 .title-class{color: nth($cb, 3)} .skin-3 .title-class{color: nth($cb, 3)}
&.skin-0 .slider-btn{color: rgba(255,255,255,.6)} .skin-0 .slider-btn{color: rgba(255,255,255,.6)}
&.skin-1 .slider-btn{color: nth($cr, 3)} .skin-1 .slider-btn{color: nth($cr, 3)}
&.skin-2 .slider-btn{color: nth($cg, 3)} .skin-2 .slider-btn{color: nth($cg, 3)}
&.skin-3 .slider-btn{color: nth($cb, 3)} .skin-3 .slider-btn{color: nth($cb, 3)}
&.skin-0 .slider-btn:hover{color: #fff} .skin-0 .slider-btn:hover{color: #e0e0e0}
&.skin-1 .slider-btn:hover{color: nth($cr, 1)} .skin-1 .slider-btn:hover{color: nth($cr, 1)}
&.skin-2 .slider-btn:hover{color: nth($cg, 1)} .skin-2 .slider-btn:hover{color: nth($cg, 1)}
&.skin-3 .slider-btn:hover{color: nth($cb, 1)} .skin-3 .slider-btn:hover{color: nth($cb, 1)}
&.skin-0 .btn-img .btn-background{background: rgba(0,0,0,0.5)} .skin-0 .btn-img:after{background: rgba(0,0,0,0.5)}
&.skin-1 .btn-img .btn-background{background: nth($cr, 1)} .skin-1 .btn-img:after{background: nth($cr, 1)}
&.skin-2 .btn-img .btn-background{background: nth($cg, 1)} .skin-2 .btn-img:after{background: nth($cg, 1)}
&.skin-3 .btn-img .btn-background{background: nth($cb, 1)} .skin-3 .btn-img:after{background: nth($cb, 1)}
&.skin-0 .default-elm{background: #fff} .skin-0 .default-elm{background: #e0e0e0}
&.skin-1 .default-elm{background: nth($cr, 1)} .skin-1 .default-elm{background: nth($cr, 1)}
&.skin-2 .default-elm{background: nth($cg, 1)} .skin-2 .default-elm{background: nth($cg, 1)}
&.skin-3 .default-elm{background: nth($cb, 1)} .skin-3 .default-elm{background: nth($cb, 1)}
.h-80{height: 80%;} .skin-0 .default-btn{background: #e0e0e0}
.skin-1 .default-btn{background: nth($cr, 1)}
.skin-2 .default-btn{background: nth($cg, 1)}
.skin-3 .default-btn{background: nth($cb, 1)}
.skin-0 .no-preview-act{background: rgba(0,0,0,.6)}
.skin-1 .no-preview-act{background: nth($cr, 3)}
.skin-2 .no-preview-act{background: nth($cg, 3)}
.skin-3 .no-preview-act{background: nth($cb, 3)}
.skin-0 .slider-preview-btn span:hover{background: rgba(0,0,0,.6)}
.skin-1 .slider-preview-btn span:hover{background: nth($cr, 3)}
.skin-2 .slider-preview-btn span:hover{background: nth($cg, 3)}
.skin-3 .slider-preview-btn span:hover{background: nth($cb, 3)}
.h-83{height: 83%;}
.h-100{height: 100%;} .h-100{height: 100%;}
} }