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 ```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>
``` ```

View File

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

View File

@ -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,