vue 使用swiper

今天没有事做，所以无聊玩一玩VUE
思路：
写http请求:
获取数据：通过QQ音乐移动版，得到数据
数据传入data: 会更新视图层，但是swiper他的样式只显示一种，所以才会有最后一步
在update时候创建实例：new swiper

<pre><code>
return new Promise((resolve, reject) => {
        let requestObj;
        if (window.XMLHttpRequest) {
            requestObj = new XMLHttpRequest();
        } else {
            requestObj = new ActiveXObject;
        }
        let sendData = '';
        if (type == 'POST') {
            sendData = JSON.stringify(data);
        }
        requestObj.open(type, url, true);
        requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        requestObj.send(sendData);
        requestObj.onreadystatechange = () => {
            if (requestObj.readyState == 4) {
                if (requestObj.status == 200) {
                    let obj = requestObj.response
                    if (typeof obj !== 'object') {
                        obj = JSON.parse(obj);
                    }
                    resolve(obj)
                } else {
                    reject(requestObj)
                }
            }
        }
    })
</code></pre>

vue代码

<template>
<div v-if="recommends.length">
  <div class="swiper-container">
    <div class="swiper-wrapper" >
      <div class="swiper-slide" v-bind:key="item.id" v-for="item in recommends">
       <a :href="item.linkUrl">
                ![](item.picUrl)
              </a>
      </div>
    </div>
    <div class="swiper-pagination swiper-pagination-white"></div>
  </div>
</div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import httpxml from '../../common/js/httpxml'
export default {
  data() {
    return {
      recommends: [],
    }
  },
  created() {
      this._getRecommend()
  },
  updated(){
    this.createSwiper();
  },
  methods: {
    createSwiper() {
      var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
        speed: 600,
        autoplay: 4000,
        onTouchEnd: function() {
          swiper.startAutoplay()
        }
      });
  },
    _getRecommend() {
      httpxml('/v2/view', { a: "b" }, 'post').then((res) => {
        this.recommends = res.data.slider;
      })
    },
  }
}
</script>

vue 使用swiper

推荐阅读更多精彩内容