APICloud+Vue.js商城实战-3.使用swiper.min.js制作首页幻灯片

tp5 app.jpg

1、该幻灯片需要引入文件

因为需要aui.css vue.js支持，这些都必须引入，以下代码只说明本幻灯片组件身份需要引入的文件

<script type="text/javascript" src="../../script/swiper.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>

2、代码，只列出幻灯片需要的部分

（1）css

    <style>
        .swiper-container {
            width: 100%;
            height: 100%;

        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>

（2）html

<div id="app">
       <section class="aui-content" id="banner">
            <!-- 演示图片 -->
            <!-- <img src="../../image/123.jpg"/> --> 
            <div class="swiper-container">
              <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="vo in ads1_list">
                    <img v-bind:src="vo.url" />
                  </div>
              </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </section>
</div>

（3）js代码

<script>
    var slide = null;
    var vm = new Vue({
        el: '#app',
        data: {
            ads1_list: [
            ],
            ads2_list: [],
            goods_list: []
        },

    // APICloud ajax方式
    methods: {
            init: function(){
                $api.css($api.byId("app"));
                api.ajax({
                    url: index_url,
                    method: 'post',
                    timeout:30,
                    dataType:'json',
                    returnAll:false,
                    data: {

                    }
                }, function(ret, err) {
                    if (ret) {
                        console.log(JSON.stringify(ret));
                        vm.ads1_list = ret.data.ads1_list;
                        vm.ads2_list = ret.data.ads2_list;
                        vm.goods_list = ret.data.goods_list;
                        setTimeout(function(){
                          var swiper = new Swiper('.swiper-container', {
                              pagination: '.swiper-pagination',
                              paginationClickable: true,
                              centeredSlides: true,
                              autoplay: 2500,
                              autoplayDisableOnInteraction: false
                          });
                        },100);
                    } else {
                        console.log(JSON.stringify(err));
                    }
                });
            }
        }
    });
    setTimeout(function () {
        vm.init();
    },500)
</script>

3、效果：

image.png