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