分别用mui和vue.js对ajax请求获取到的图片做了轮播图的实现

首先说明一下，本人是个小白，刚开始学习mui和vue.js，首先App的首页刚进来就是一个轮播图，我就去mui文档里找了mui的轮播图，然后按照mui的ajax请求写了一个轮播图的实现，具体看代码。

注：使用mui必须导入mui相应的css和js,还要给mui初始化，具体看文档

<link href="css/mui.min.css" rel="stylesheet" />

<script src="js/mui.min.js"></script>

 <script type="text/javascript">

            mui.init()

 </script>

这个是HTML页面

<!-- 轮播图--mui--ajax请求获取数据，简单的DOM操作实现数据的遍历 -->

            <div id="slider" class="mui-slider">

                <div class="mui-slider-group mui-slider-loop">          

                </div>

                <div class="mui-slider-indicator">

                    <div class="mui-indicator mui-active"></div>

                    <div class="mui-indicator"></div>

                    <div class="mui-indicator"></div>

                    <div class="mui-indicator"></div>

                </div>

            </div>

这是js部分的实现

/**

*获取轮播图

 *mui方法实现ajax请求，获取接口数据，并已原生的DOM操作实现对数据的遍历

 */

$.ajax({

         type: "post",

         url:"http://101.200.58.3/librarywebapi/advert/list",

         dataType: "json",

         success: function(res) {

         console.log(res);

         $('.mui-slider-group').empty();

         $('.mui-slider-indicator').empty();

         var length = res.Data.length;

         if(length == 1) {

         console.log(res.Data[0].Image)

         $('.mui-slider-group').append('<div class="mui-slider-item"><img class="lunbo-img" src="' + res.Data[0].Image + '" /></div>');

         } else {

         $('.mui-slider-group').append('<div class="mui-slider-item mui-slider-item-duplicate"><img class="lunbo-img" src="' + res.Data[length - 1].Image + '" /></div>');

         $('.mui-slider-indicator').append('<div class="mui-indicator mui-active"></div>');

         for(var i = 0; i < length; i++) {

         $('.mui-slider-group').append('<div class="mui-slider-item"><img class="lunbo-img" src="' + res.Data[i].Image + '" /></div>');

         }

         $('.mui-slider-group').append('<div class="mui-slider-item mui-slider-item-duplicate"><img class="lunbo-img" src="' + res.Data[0].Image + '" /></div>');

         for(var i = 0; i < length - 1; i++) {

         $('.mui-slider-indicator').append('<div class="mui-indicator"></div>');

         }

         }

         var gallery = mui('.mui-slider');

         gallery.slider({

         interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；

         });

         }

         });

首先说明一点，写到这里是完全可以实现轮播图的效果的，但是我看着觉得很麻烦，这种方法写的太过去原生了，在现实开发过程中很麻烦，所以我就想vue.js可不可以和mui套用，用mui的页面，vue.js的js来实现，于是，我就写了另一种方式

注：vue.js需要导入相应的js包

<script type="text/javascript" src="js/vue.min.js"></script>

ajax请求就需要导入axios包

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

下面上代码：(vue.js必选给外层div给一个id，js部分要取得这个元素，既：例子中的app)

<div id="app">

<!--轮播图--vue.js--ajax请求获取接口数据，实现数据的遍历-->

            <div id="slider" class="mui-slider">

                <div class="mui-slider-group mui-slider-loop">

                    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img v-bind:src="getAdvertImage0.Image" /></a></div>

                    <div class="mui-slider-item" v-for="a of getAdvertImage" ><a href="#"><img v-bind:src="a.Image" /></a></div>

                 </div>

                <div class="mui-slider-indicator">

                    <div class="mui-indicator mui-active"></div>

                    <div class="mui-indicator"></div>

                    <div class="mui-indicator"></div>

                    <div class="mui-indicator"></div>

                </div>

            </div>

</div>

下面是js部分的实现

/**

  * 获取轮播图

*Vue.js方法实现ajax请求，获取接口数据，并且遍历到前端html页面

*/

            var vm = new Vue({

                el:'#app',

                data:{

                    // data中的值用来存储methods里面ajax请求得到的返回值，html页面遍历取得的就是data里面的值

                    getAdvertImage:[],

                    getAdvertImage0:[],

                },

                mounted:function(){

                    //页面咦加载进去的时候就获得数据

                    this.getAdvert();

                },

                methods:{

                    getAdvert:function(){

                        //发送get请求

                        axios.post('http://101.200.58.3/librarywebapi/advert/list').then(function(res){

                            vm.getAdvertImage = res.data.Data;

                            for (var i = 0;i<res.data.Data.length;i++) {

                                // 避免muiUI轮播图加载的时候出现空白屏幕

                                vm.getAdvertImage0 = res.data.Data[0];

                            }

                            

                        },function(){

                            console.log('请求失败处理');

                        });

                    }

                }

            });

            /**

            *设置mui轮播图自动播放周期

            */

            setTimeout(function(){

                var gallery = mui('.mui-slider');

                gallery.slider({

                    interval:1800//自动轮播周期，若为0则不自动播放，默认为0；

                });

            },300)

好了，就这样用两种方法实现了对轮播图的加载，，，，，，，我是一个初学者，可能写的有点啰嗦，希望大家多多指教！！！！