6.首页轮播图配置及数据渲染

1. 创建如下文件，并写好插件，对组件进行集中管理，完整代码如下

import { Swipe, SwipeItem,Button } from 'vant';

// 放入数组中，循环遍历，方便
let plugins=[
    Swipe,SwipeItem,Button
]   
// 调用函数取值,并导出函数,之后便可以在main.js使用，用get传参，把app传进去
export default function getVant(app){
    plugins.forEach((item)=>{
        return app.use(item)
    })
}

 2. 在main.js中完成配置，代码有所修改，完整代码如下

import { createApp } from 'vue'
import App from './App.vue'
import getVant from './plugins'
import router from './router'
import store from './store'

const app=createApp(App)
getVant(app) // 传入app后便可以使用这个组件,在index中返回这个值
app.use(store)
app.use(router).mount('#app')

3. 实现轮播图

https://vant3.uihtm.com/#/zh-CN/swipe

这里使用懒加载，当swipe中含有图片时，通过lazy-render属性开启懒加载模式，在该模式下，只会渲染当前页和下一页。

a. 在TopSwiper.Top写轮播图

<template>
    <div id="swiperTop">
        <van-swipe :autoplay="3000" lazy-render>
           <van-swipe-item v-for="image in state.images" :key="image">
             <img :src="image.pic" /> 
             <!-- 8. F12查询发现要获取数据，应加.pic -->
           </van-swipe-item>
        </van-swipe>
    </div>
</template>

export default {
  setup() {
    const images = [
      'https://unpkg.com/@vant/assets/apple-1.jpeg',
      'https://unpkg.com/@vant/assets/apple-2.jpeg',
    ];
    return { images };
  },
};

b. 使用banner，链接如下

https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=banner

说明 : 调用此接口 , 可获取 banner( 轮播图 ) 数据

ps. 由于使用的的iphone，所以type是2，如下，在后面用axios获取数据会使用

/banner?type=2

4. 使用npm安装axios

npm install axios

5. 启动网易云音乐后端，项目已打包

链接：https://pan.baidu.com/s/18YmPPC2mZiOH-p4IpSfENA 
提取码：1111

在vscode中打开项目后，先安装依赖

npm install

在后端项目路径下，打开命令窗口：找到文件，路径全选删除，写cmd回车即可

输入以下指令，启动后端（或者安装依赖后直接输入指令启动）

node app.js

出现了域名，说明后端启动成功，此界面不要关闭！！！

 

之后用vue3语法写好setup方法与onMounted方法，之后运行，按F12后会在（console）控制台中出现下面的data，banner说明获取了轮播图的数据，之后将数据渲染到轮播图中

使用vue3中的reactive完成相应，修改响应式对象，所有地方的state均是后加的（定义、循环等）

6. 完善轮播图，完整代码如下

<template>
    <div id="swiperTop">
        <van-swipe :autoplay="3000" lazy-render>
           <van-swipe-item v-for="image in state.images" :key="image">
             <img :src="image.pic" /> 
             <!-- 8. F12查询发现要获取数据，应加.pic -->
           </van-swipe-item>
        </van-swipe>
    </div>
</template>
<script>
import axios from 'axios'
// 1.生命周期的钩子需要先引入
import { reactive,onMounted } from 'vue';  // 2.然后使用，用到了=>函数

export default {
  setup() {
    const state = reactive({ 
        images:[
      'https://unpkg.com/@vant/assets/apple-1.jpeg',
      'https://unpkg.com/@vant/assets/apple-2.jpeg',
    ]});
    onMounted(()=>{  // 3.先在后端拿域名，再去网易云拿服务器地址 用.then获取结果
       axios.get('http://localhost:3000/banner?type=2').then((res)=>{
         console.log(res);   // 4.打印res，去看结果
         state.images=res.data.banners  // 5.这是常量无法赋值，应修改成响应式的,再加state
         console.log(state.images); 
       })
    })
    return { state };  // 6.返回响应对象出去  7.上面的循环中也要加state
  },       // 这里的images改成state
};
</script>

<style lang="less">
#swiperTop{
.van-swipe{
    width: 100%;
    height: 3rem;
    // .van-swipe__track{
      .van-swipe-item{
        padding: 0 0.2rem;
          img{
            width:100%;
            height:100%;
            border-radius: 0.2rem;  // 修改边框样式
        }
      }
      .van-swipe__indicator--active{
        background-color: rgb(219,130,130);  // 修改导航点样式
      }
    }
  }
// }
</style>

补充：style中的样式名可以这样看

7. 轮播图效果如下