重构slider组件
宇天
parent
8ef894f899
commit
d84f387fff
|
|
@ -1,57 +0,0 @@
|
|||
# 幻灯片组件文档
|
||||
|
||||
## 配置说明
|
||||
|
||||
```json
|
||||
{
|
||||
sliderList: [{src: '', title: '', link: '', elm: ''}], //src: 图片地址; link: 点击链接; title: 幻灯片标题(可以是文本或html); elm: 幻灯片中的dom元素
|
||||
autoSlide: boolean, //true: 自动轮播; false: 停止轮播
|
||||
time: int, //自动轮播间隔时间
|
||||
preview: boolean //是否缩略有图(不适用于全屏)
|
||||
skin: int, //4种,默认0(0,1,2,3)
|
||||
sliderType: int, //幻灯片动画效果,目前有1: 水平滑动;2: 水平渐进渐出;3: 垂直滑动;4: 垂直渐进渐出
|
||||
$onSuccess: function(vm){
|
||||
slider = vm
|
||||
}, //初始化回调
|
||||
vm.$setSliderList(list), //赋值数据给幻灯片数组
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
## 用法
|
||||
|
||||
```html
|
||||
<div class="slider" :controller="test">
|
||||
<template name="sliders" config="sliderOpts"></template>
|
||||
</div>
|
||||
<!--
|
||||
其中config属性是指定分页组件的配置，会自动从上一层controller里找;
|
||||
其他的属性（除$id, config, id, class, tabindex, style, ms-*属性,data-*属性外，也可以用以配置组件，且优先级最高）;
|
||||
name属性可以设定组件的$id值，方便各模块之间进行通讯
|
||||
-->
|
||||
<!-- 引入幻灯片组件 -->
|
||||
<script src="//dist.doui.cc/js/yua.js"></script>
|
||||
<script>
|
||||
require(['//dist.doui.cc/js/lib/sliders/main.js'],function(){
|
||||
var vm = yua({
|
||||
$id: "test",
|
||||
sliderOpts: {
|
||||
sliderList: [{src: '', link: '', title: '', elm: ''}],
|
||||
autoSlide: false,
|
||||
time: 0,
|
||||
// preview: true,
|
||||
fullScreen: true,
|
||||
skin: 1,
|
||||
sliderType: 4,
|
||||
$onSuccess: function(vm){
|
||||
slider = vm
|
||||
slider.$setSliderList(list)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
yua.scan()
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<label></label>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default class Slider {
|
||||
props = {
|
||||
value: 0,
|
||||
max: 100
|
||||
}
|
||||
|
||||
__init__() {
|
||||
/* render */
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
<div class="do-sliders" :class="{fullscreen: fullScreen}">
|
||||
<div class="skin" :class="{{skin}}">
|
||||
|
||||
<div class="slider-content" :class="{'h-83': preview && !fullScreen, 'h-100': !preview || fullScreen}" :if="sliderList.length" :mouseenter="$stopSlide()" :mouseleave="$startSlide()">
|
||||
<a class="do-ui-font slider-btn" href="javascript:;"
|
||||
:if="sliderType < 3"
|
||||
:click="$go(-1)"></a>
|
||||
|
||||
<div class="container">
|
||||
<div class="box"
|
||||
:if="sliderType == 1"
|
||||
:css="{width: sliderList.length * 100 + '%', transform: animation}">
|
||||
<a class="page" target="_blank"
|
||||
:repeat="sliderList"
|
||||
:css="{width: currWidth + '%'}"
|
||||
: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 == 2">
|
||||
<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">
|
||||
|
||||
<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>
|
||||
|
||||
<a class="do-ui-font slider-btn" href="javascript:;"
|
||||
:if="sliderType < 3"
|
||||
:click="$go(1)"></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>
|
||||
|
||||
<a class="btn-img" href="javascript:;"
|
||||
:if="preview && !fullScreen"
|
||||
:class="{act: curr === $index || (curr >= maxNum && $index == maxNum - 1), 'default-btn': !el.src}"
|
||||
: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" ms-if="el.src"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,163 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @authors linteng (875482941@qq.com)
|
||||
* @date 2017-09-07 19:53:18
|
||||
*/
|
||||
|
||||
define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
|
||||
|
||||
var dom;
|
||||
var sliderNum = 0;
|
||||
var skin = ['skin-0','skin-1','skin-2','skin-3']
|
||||
|
||||
/**
|
||||
* [根据当前幻灯片索引获取填充底下按钮数据]
|
||||
* @param {Object} vm [vm对象]
|
||||
* @return {[Array]} [填充到按钮的数据]
|
||||
*/
|
||||
function getBtnList(vm, el){
|
||||
if(el){
|
||||
dom = el
|
||||
}
|
||||
vm.maxNum = Math.floor(dom.offsetWidth / 90)
|
||||
var curr = vm.curr + 1
|
||||
let res = []
|
||||
if(!vm.preview)
|
||||
res = vm.sliderList
|
||||
|
||||
if(vm.maxNum >= vm.sliderList.length){
|
||||
res = vm.sliderList
|
||||
}else{
|
||||
if(curr > vm.maxNum){
|
||||
res = vm.sliderList.slice(curr - vm.maxNum, curr)
|
||||
}else if(curr <= vm.maxNum){
|
||||
res = vm.sliderList.slice(0, vm.maxNum)
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
/**
|
||||
* [设置自动轮播]
|
||||
* @param {[type]} vm [description]
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
function autoSlide(vm){
|
||||
vm.timer = setTimeout(function(){
|
||||
vm.$go(1)
|
||||
autoSlide(vm)
|
||||
}, vm.time <= 0 ? 3000 : vm.time)
|
||||
}
|
||||
|
||||
return yua.component("sliders", {
|
||||
$template: tpl,
|
||||
$init: function(vm){
|
||||
vm.$go = function(num){
|
||||
vm.curr += num
|
||||
if(vm.curr < 0){
|
||||
vm.curr = vm.sliderList.length - 1
|
||||
}else if(vm.curr > vm.sliderList.length - 1){
|
||||
vm.curr = 0
|
||||
}
|
||||
}
|
||||
|
||||
vm.$jump = function(i){
|
||||
var curr = vm.curr + 1
|
||||
if(curr > vm.maxNum && vm.preview){
|
||||
var distance = vm.maxNum - (i + 1)
|
||||
vm.curr -= distance
|
||||
}else{
|
||||
vm.curr = i
|
||||
}
|
||||
}
|
||||
|
||||
vm.$stopSlide = function(){
|
||||
if(vm.autoSlide){
|
||||
clearTimeout(vm.timer)
|
||||
}
|
||||
}
|
||||
|
||||
vm.$startSlide = function(){
|
||||
if(vm.autoSlide)
|
||||
autoSlide(vm)
|
||||
}
|
||||
|
||||
vm.$setSliderList = function(list){
|
||||
vm.sliderBtnList.removeAll()
|
||||
vm.sliderList.pushArray(list)
|
||||
}
|
||||
|
||||
vm.$onSuccess(vm)
|
||||
},
|
||||
$ready: function(vm, el){
|
||||
vm.skin = skin[vm.skin]
|
||||
vm.currWidth = (100 / vm.sliderList.length)
|
||||
if(vm.autoSlide)
|
||||
autoSlide(vm)
|
||||
|
||||
if(vm.preview){
|
||||
vm.sliderBtnList.removeAll()
|
||||
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)
|
||||
}
|
||||
},
|
||||
currWidth: 0,
|
||||
animation: '',
|
||||
curr: 0,
|
||||
sliderBtnList: [],
|
||||
maxNum: 0,
|
||||
timer: yua.noop,
|
||||
sliderType: 1,
|
||||
|
||||
sliderList: [],
|
||||
autoSlide: '',
|
||||
time: 3000,
|
||||
preview: false,
|
||||
skin: 0,
|
||||
fullScreen: false,
|
||||
|
||||
$onSuccess: yua.noop,
|
||||
$setSliderList: yua.noop,
|
||||
$jump: yua.noop,
|
||||
$stopSlide: yua.noop,
|
||||
$startSlide: yua.noop,
|
||||
$go: yua.noop,
|
||||
})
|
||||
|
||||
yua.scan(dom)
|
||||
|
||||
})
|
||||
Reference in New Issue