Vue-awesome-swiper使用教程

Posted 2023-03-17

参考技术A

github地址： https://github.com/surmon-china/vue-awesome-swiper

Ⅰ. 什么是Nuxt.js:
Nuxt.js 是一个基于 Vue.js 的通用应用框架，通过对客户端/服务端基础架构的抽象组织，预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。（开箱即用）
官方地址： https://zh.nuxtjs.org/guide

Ⅱ. Nuxt安装使用

Ⅲ. Nuxt模板目录结构分析

重点关注 ：components、layouts、pages、plugins、nust.config.js目录及文件

Ⅳ.Nuxt路由

➀.pages目录结构自动生成对应的路由配置

➁路由跳转

注意 ：不能用a标签代替nuxt-link组件，虽然最终的显示效果一样，但是a标签会刷新页面

③动态路由

④路由参数校验

Nuxt.js 可以让你在动态路由对应的页面组件中配置一个 validate 方法用于校验动态路由参数的有效性。该函数有一个布尔类型的返回值，如果返回true则表示校验通过，如果返回false则表示校验未通过。

⑤嵌套路由

Ⅴ.布局组件

特殊的布局组件 ：error布局组件（error是关键字，只能取这个名字）

Ⅵ.设置全局样式

Ⅶ.ElementUI使用

测试的时候不要范如下错误 ：

Ⅷ.发送请求

➀.生命周期函数：

在nuxt中，只有created以及beforeCreate两个能够在服务端正常使用

但是发异步请求不能在created生命周期函数中去发送，因为它会在前端执行（打印一下，发送前端和服务器端都会有打印信息）

那么如何发送异步请求呢？

➁.asyncData的方法:可以在服务端或路由更新之前被调用, 需要注意这个函数中 不能 使用 this

③. axios的使用

Ⅸ.SEO优化

➀.全局优化:在nuxt.config.js配置文件中修改

➁.局部优化:去每个页面直接加入head() 方法

Ⅹ.实战项目：豆瓣电影小案例

➀.案例源码：
复制这段内容后打开百度网盘手机App，操作更方便哦
链接： https://pan.baidu.com/s/1YFdpQIGUMF28uEm8oBUfbw
提取码：iqjb

➁.获取源码后项目跑动

后记： 解决SEO问题不一定非得用服务端渲染来处理，特别是项目已经开发完毕，突然告诉你添加个SEO优化，这时候可以考虑vue-meta-info ，官方地址： https://github.com/muwoo/vue-meta-info

记使用vue-awesome-swiper遇到的一些问题

一、vue-awesome-swiper的使用

  1、在项目中全局引用 

import VueAwesomeSwiper from ‘vue-awesome-swiper‘
// require styles
import ‘swiper/dist/css/swiper.css‘
Vue.use(VueAwesomeSwiper /* { default global options } */)

  引入之后，在文件中直接使用

       <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
            <!-- slides -->
            
            <swiper-slide  v-for="(item,index) in newCards" :key="index">
              <div class="swiper-slide-item">
                <div class="slide-img-wrap">
                  <img :src="item.image" />
                </div>
              </div>
            </swiper-slide>
            <!-- 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>

2、在组件中局部

文件中导入

 import ‘swiper/dist/css/swiper.css‘
 import { swiper, swiperSlide } from ‘vue-awesome-swiper‘　　

注册组件

components: {
   swiper，
   swiperSlide
},　　

html中的写法和全局引入时的一样　

 

二、问题

   1、swiper外加了v-if，无法读取this.$refs,也就是通过this.$refs无法拿到swiper对象，无法在滑动卡片之后拿到我想要的当前的card的位置，去掉v-if通过this.$refs可以读到swiper对象。

      打印this，可以看到有swiper对象，但是读出来却没有

 

 

data() {
    return {
      swiperOption: {
          width: 234,
          onSlideChangeStart: swiper => {
            let i = swiper.activeIndex;
            this.currentCardId = i
            console.log(‘index:‘, i)
          },
      }
    }
},

mounted() {

// current swiper instance

// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了

    console.log(this, this.swiper, this.$refs, this.$refs.mySwiper)

// console.log(‘this is current swiper instance object‘, this.swiper)

// this.swiper.slideTo(3, 1000, false)

},

当前版本用的是swiper3，可以使用onSlideChangeStart方法来监听事件，从而获取到swiper对象，拿到当前元素的属性。

 

2、给swiper-slide动态添加class类，css无效。

    所以我最终将需要给偏移值的第一个swiper-slide直接写死了class

 

总结：这两个问题都涉及到渲染问题。

未完待续。。。