从网站接口拿数据的两种方式 swiper（2018/12/1）

一、用axios拿数据
 
        在需要渲染数据的组件中引入axios
        找到对应的网站--->开发者工具---->Network/js/需要的接口/Request UR----->复制
        在created(){}中用axios.get拿数据----->粘贴路径后删掉callback----->在config文件夹下的index.js中设置跨域------>将axios.get()中的路径做一下修改
page/index.vue
import axios from 'axios'
     export default{
          created(){
               axios.get("/wz/api/v3/get?_=1543633838772").then((res)=>{
                   console.log(res)
              })
     }
}         
 
config/index.js
 
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
     "/wz":{
          target:"http://cre.mix.sina.com.cn",
          changeOrigin:true,
          pathRewrite:{
              "^/wz":"/"
          }
     }
    },
 
 
二、用vue-jsonp拿数据
 
           在文件路径下的CMD中安装vue-jsonp     cnpm i vue-jsonp --save
             在main.js中引入  import VueJsonp from ‘vue-jsonp’
                                        Vue.use（VueJsonp）
            在page/index.vue中用this.$jsonp引入接口
page/index.vue
import axios from 'axios'
     export default{
               this.$jsonp("http://temp.163.com/special/00804KV1/post1603_api_all.js?_=1543633838771",{  //去掉callback
                   callbackName:'callback'
              }).then((res)=>{
                   console.log(res)
              })
          }
     }
 
三、swiper的使用
             this.$nextTick(callback) 和 setTimeout(callback,0)  //延迟回调函数的执行，直到dom加载完毕
            安装 cnpm i swiper --save
       
                 在node_modules中找到swiper/dist/css/swiper.css------->引入  
     import Swiper from 'swiper'   //引入swiper插件 
     import  '.. /../../node_modules/swiper/dist/css/swiper.css'  //引入文件 放在watch中动态监
             在swiper官网中---->中文教程 swpier.x4------>将 html内容复制到需要的页面
<div class="swiper-container">
 <div class="swiper-wrapper"> 
<div class="swiper-slide">Slide 1</div> 
<div class="swiper-slide">Slide 2</div> 
<div class="swiper-slide">Slide 3</div> 
     </div> <!-- 如果需要分页器 --> 
<div class="swiper-pagination"></div> 
         <!-- 如果需要导航按钮 --> 
<div class="swiper-button-prev"></div> 
<div class="swiper-button-next"></div> 
          <!-- 如果需要滚动条 --> 
<div class="swiper-scrollbar"></div> </div>
      在swiper官网中---->中文教程 swpier.x4------>将script内容复制到需要的页面   用于初始化Swiper 控数据变化  如果需要其他功能可以将代码粘在这里面，然后设置需要的css样式
        var mySwiper = new Swiper ('.swiper-container', {
         direction: 'vertical', // 垂直切换选项 
         loop: true, // 循环模式选项
         // 如果需要分页器
         pagination: {
             el: '.swiper-pagination', 
        }, 
         // 如果需要前进后退按钮
         navigation: { nextEl: '.swiper-button-next', 
                prevEl: '.swiper-button-prev',
         },
         // 如果需要滚动条 
        scrollbar: { el: '.swiper-scrollbar',
         },
 })
            
 
取数据 + swiper的使用
page/index.vue
 
<template>
     <div>
          <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in news">   <!--循环遍历news中的数据-->
          <img v-bind:src="item.thumb"/>   <!--从news的数据中取出图片-->
        </div>
      
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>
     </div>
</template>
<script>
     import axios from 'axios'
     import  '../../../node_modules/swiper/dist/css/swiper.css'
     import Swiper from 'swiper'
     
     export default{
          data(){
              return{
                   news:[]   //2)拿到数据放在news里
              }
          },
          created(){
               axios.get("/wz/api/v3/get?_=1543633838772").then((res)=>{   //1)取数据     这是第一种取数据的方法 这里去掉callback是因为then（）就是一个回调函数
                   console.log(res)
                   this.news=res.data.data.filter((item,index)=>{
                        return index<5
                   })
              })
              
               this.$jsonp("http://temp.163.com/special/00804KV1/post1603_api_all.js?_=1543633838771",{
                   callbackName:'callback'    //这是第二种取数据的方法
              }).then((res)=>{
                   console.log(res)
              })
          },
          watch:{  //3)监听数据   
              news(){
                   this.$nextTick(()=>{  // 在这里面进行实例化     4)等待dom跟新完成
                         var mySwiper = new Swiper  ('.swiper-container', {    //5)实例化
                           
                            loop: true, // 循环模式选项
                            
                            // 如果需要分页器
                            pagination: {
                              el: '.swiper-pagination',
                            },
                            autoplay: {
                                 delay: 3000,
                                 stopOnLastSlide: false,
                                  disableOnInteraction:false,  //false 用户操作后还能自动播放  true 用户操作之后就不动了
                                 },
  })
                   })
              }
          }
     }
</script>
<style lang='scss'>
     $sc:25;
     .swiper-container img{
          width:100%;
          height: 175/$sc+rem;
     }
</style>
posted @ 2019-09-12 10:45  zsrTaki  阅读(521)  评论(0)    收藏  举报