增加初始化回调来填充数据 👌
parent
fc767ca6ee
commit
3d88404c57
|
@ -4,7 +4,6 @@
|
|||
|
||||
```json
|
||||
{
|
||||
|
||||
sliderList: [{src: '', link: '', title: '', titleStyle: ''}], //src: 图片地址; link: 点击链接; title: 幻灯片标题(可以是文本或html); titleStyle: 标题样式
|
||||
autoSlide: boolean, //true: 自动轮播; false: 停止轮播
|
||||
time: int, //轮播间隔时间
|
||||
|
@ -28,21 +27,19 @@ name属性可以设定组件的$id值,方便各模块之间进行通讯
|
|||
<!-- 引入幻灯片组件 -->
|
||||
<script src="//dist.doui.cc/js/yua.js"></script>
|
||||
<script>
|
||||
;(function(yua){
|
||||
require(['//doui.lt/js/lib/sliders/main.js'],function(){
|
||||
var vm = yua({
|
||||
$id: "test",
|
||||
sliderOpts: {
|
||||
sliderList: [{src: '', link: '', title: '', titleStyle: ''}],
|
||||
autoSlide: false,
|
||||
time: 0,
|
||||
preview: true
|
||||
require(['//dist.doui.cc/js/lib/sliders/main.js'],function(){
|
||||
var vm = yua({
|
||||
$id: "test",
|
||||
sliderOpts: {
|
||||
sliderList: [{src: '', link: '', title: '', titleStyle: ''}],
|
||||
autoSlide: false,
|
||||
time: 0,
|
||||
preview: true
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
yua.scan()
|
||||
}
|
||||
})
|
||||
})(yua)
|
||||
|
||||
yua.scan()
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
|
|
@ -4,20 +4,21 @@
|
|||
|
||||
<div class="container">
|
||||
<div class="box"
|
||||
:attr="{style: 'width: ' + sliderList.length * 100 + '%;' + transform}">
|
||||
:attr="{style: 'width:' + sliderList.length * 100 + '%;' + transform}">
|
||||
<a target="_blank"
|
||||
:repeat="sliderList"
|
||||
:attr="{style: 'width: ' + currWidth + ';', href: el.link || 'javascript:;'}">
|
||||
<img :attr="{src: el.src}">
|
||||
:css="{width: currWidth}"
|
||||
:attr="{href: el.link || 'javascript:;'}">
|
||||
<img :attr-src="el.src">
|
||||
<p :if="el.title"
|
||||
:attr="{style: el.titlaStyle + ';' ? el.titleStyle : ';'}"
|
||||
:attr="{style: el.titlaStyle ? el.titleStyle + ';' : ''}"
|
||||
:html="el.title"
|
||||
class="default-class"></p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn" :attr="{style: 'bottom:' + (preview ? '-120px' : '0;')}">
|
||||
<div class="btn" :css="{bottom: (preview ? '-120px' : '0;')}">
|
||||
<span :if="!preview"
|
||||
href="javascript:;"
|
||||
:class="{'no-preview-act': curr === $index}"
|
||||
|
|
|
@ -6,8 +6,6 @@
|
|||
|
||||
define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
|
||||
|
||||
var auto
|
||||
|
||||
/**
|
||||
* [获取当前幻灯片元素宽度]
|
||||
*/
|
||||
|
@ -48,10 +46,10 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
|
|||
* @return {[type]} [description]
|
||||
*/
|
||||
function autoSlide(vm){
|
||||
var timer = setInterval(function(){
|
||||
vm.auto = setTimeout(function(){
|
||||
vm.$go(1)
|
||||
autoSlide(vm)
|
||||
}, vm.time)
|
||||
return timer
|
||||
}
|
||||
|
||||
return yua.component("sliders", {
|
||||
|
@ -78,13 +76,17 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
|
|||
|
||||
vm.$stopSlide = function(){
|
||||
if(vm.autoSlide){
|
||||
clearInterval(auto)
|
||||
clearTimeout(vm.auto)
|
||||
}
|
||||
}
|
||||
|
||||
vm.$startSlide = function(){
|
||||
if(vm.autoSlide)
|
||||
auto = autoSlide(vm)
|
||||
autoSlide(vm)
|
||||
}
|
||||
|
||||
vm.$setSliderList = function(list){
|
||||
vm.sliderList = list
|
||||
}
|
||||
|
||||
vm.$watch('curr', function(val, old) {
|
||||
|
@ -109,25 +111,30 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
|
|||
vm.sliderBtnList = getBtnList(vm)
|
||||
}, false)
|
||||
|
||||
vm.$onSuccess(vm)
|
||||
},
|
||||
$ready: function(vm){
|
||||
vm.currWidth = getWidth()
|
||||
if(vm.autoSlide)
|
||||
auto = autoSlide(vm)
|
||||
autoSlide(vm)
|
||||
|
||||
vm.sliderBtnList = getBtnList(vm)
|
||||
if(vm.preview)
|
||||
vm.sliderBtnList = getBtnList(vm)
|
||||
},
|
||||
currWidth: 0,
|
||||
transform: '',
|
||||
curr: 0,
|
||||
sliderBtnList: [],
|
||||
maxNum: '',
|
||||
auto: '',
|
||||
|
||||
sliderList: [],
|
||||
autoSlide: '',
|
||||
time: 3000,
|
||||
preview: true,
|
||||
|
||||
$onSuccess: yua.noop,
|
||||
$setSliderList: yua.noop,
|
||||
$jump: yua.noop,
|
||||
$stopSlide: yua.noop,
|
||||
$startSlide: yua.noop,
|
||||
|
|
Reference in New Issue