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

增加初始化回调来填充数据 👌

old
lcoln 2017-09-17 23:22:25 +08:00
parent fc767ca6ee
commit 3d88404c57
3 changed files with 33 additions and 28 deletions

View File

@ -4,7 +4,6 @@
```json
{
sliderList: [{src: '', link: '', title: '', titleStyle: ''}], //src: 图片地址; link: 点击链接; title: 幻灯片标题(可以是文本或html); titleStyle: 标题样式
autoSlide: boolean, //true: 自动轮播; false: 停止轮播
time: int, //轮播间隔时间
@ -28,8 +27,7 @@ name属性可以设定组件的$id值方便各模块之间进行通讯
<!-- 引入幻灯片组件 -->
<script src="//dist.doui.cc/js/yua.js"></script>
<script>
;(function(yua){
require(['//doui.lt/js/lib/sliders/main.js'],function(){
require(['//dist.doui.cc/js/lib/sliders/main.js'],function(){
var vm = yua({
$id: "test",
sliderOpts: {
@ -43,6 +41,5 @@ name属性可以设定组件的$id值方便各模块之间进行通讯
yua.scan()
})
})(yua)
</script>
```

View File

@ -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}"

View File

@ -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,12 +111,14 @@ 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)
if(vm.preview)
vm.sliderBtnList = getBtnList(vm)
},
currWidth: 0,
@ -122,12 +126,15 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
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,