提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

Nuxt项目中使用VueAwesomeSwiper

项目 使用 Nuxt
2023-06-13 09:13:11 时间

一.VueAwesomeSwiper

是一个vue插件，可以实现banner的幻灯片播放的功能

目前主流版本：

5.0.1 五个月前发布 vue3
4.1.1 vue2
3.1.3 vue2
2.3.7 vue2

一定要看好swiper的版本和你的vue版本是否对应，不然铁定踩坑，本人就是这么过来的

然后就是安装，这里我们安装3.1.3版本的 

npm install vue-awesome-swiper@3.1.3

然后在nuxt项目的plugins文件夹中新建文件：

nuxt-swpier-plugin.js

然后键入以下内容： 

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

上述内容就是对swiper的一个全局注册

然后我们就可以使用了

在index.vue中引入： 

export default {
  data () {
    return {
      swiperOption: {
        //配置分页
        pagination: {
          el: '.swiper-pagination'//分页的dom节点
        },
        //配置导航
        navigation: {
          nextEl: '.swiper-button-next',//下一页dom节点
          prevEl: '.swiper-button-prev'//前一页dom节点
        }
      },
      //banner数组
      bannerList:[],
      eduList:[],
      teacherList:[]
    }
  },
  created() {
    //调用查询banner的方法
    this.getBannerList()
    //调用查询热门课程和名师的方法
    this.getHotCourseTeacher()
  },
  computed:{
    swiper(){
      return this.$refs.mySwiper.swiper
    }
  },
  methods:{
    //查询热门课程和名师
    getHotCourseTeacher() {
      index.getIndexData()
        .then(response => {
          this.eduList = response.data.data.eduList
          this.teacherList = response.data.data.teacherList
        })
    },
    //查询banner数据
    getBannerList() {
      banner.getListBanner()
        .then(response => {
          this.bannerList = response.data.data.list
        })
    }
  }
}
</script>

然后再写我们的template部分： 

<!-- 幻灯片 开始 -->
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <div v-for="banner in bannerList" :key="banner.id" class="swiper-slide" style="background: #040B1B;">
        <swiper-slide>
          <a target="_blank" :href="banner.linkUrl">
            <img :src="banner.imageUrl" :alt="banner.title">
          </a>
        </swiper-slide>

      </div>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
      <div class="swiper-scrollbar"   slot="scrollbar"></div>
    </swiper>

swagger接口测试成功：

前端定义接口：

新建api目录，在api目录里新建banner.js文件 

import request from "@/utils/request";

export default {
  getListBanner(){
    return request({
      url:'/educms/bannerfront/getAllBannerT',
      method:'get'
    })
  }
}

nuxt前端展示成功

相关文章