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

js/lib/sliders/Readme.md

@@ -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(['//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: {
+                sliderList: [{src: '', link: '', title: '', titleStyle: ''}],
-                    sliderList: [{src: '', link: '', title: '', titleStyle: ''}],
+                autoSlide: false,
-                    autoSlide: false,
+                time: 0,
-                    time: 0,
+                preview: true
-                    preview: true
 
-                }
+            }
-            })
-
-            yua.scan()
         })
-    })(yua)
+
+        yua.scan()
+    })
 </script>
 ```

js/lib/sliders/main.htm

@@ -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:;'}">
+                :css="{width: currWidth}"
-                <img :attr="{src: el.src}">
+                :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}"

js/lib/sliders/main.js

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