Vue使用vue-awesome-swiper最后一个元素显示不全问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue使用vue-awesome-swiper最后一个元素显示不全问题相关的知识,希望对你有一定的参考价值。
参考技术A Vue项目中使用swiper组件,swiper中的数据是接口返回,得到接口的数据再初始化swiper,但是开始的时候,swiper无法拖动,看了半天官方文档,发现有个width属性,可以控制swiper的宽度,主要是针对隐藏情况下初始化swiper。这样就解决了无法拖动的问题。
swiper的width设置官方文档:
https://www.swiper.com.cn/api/parameters/274.html
vue 使用 vue-awesome-swiper (基础版)
1.0 安装 vue-awesome-swiper(稳定版本 2.6.7)
npm install [email protected] --save
2.0 引入配置(全局使用)
2.1.0 在 main.js 中配置
import VueAwesomeSwiper from ‘vue-awesome-swiper‘
import ‘swiper/dist/css/swiper.css‘
Vue.use(VueAwesomeSwiper, /* { default global options } */)
3.0 使用配置 (具体组件)
3.1.0 DOM 部分 (view)
<template>
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide>I‘m Slide 1</swiper-slide>
<swiper-slide>I‘m Slide 2</swiper-slide>
<swiper-slide>I‘m Slide 3</swiper-slide>
<swiper-slide>I‘m Slide 4</swiper-slide>
<swiper-slide>I‘m Slide 5</swiper-slide>
<swiper-slide>I‘m Slide 6</swiper-slide>
<swiper-slide>I‘m Slide 7</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>
</template>
3.2 数据部分 (model)
3.2.1 与轮播配置相关的配置项写在 swiperOption 对象中
data() {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数
// ...
loop: true, // 循环轮播
autoplay: true, // 自动轮播
speed: 5000, // 轮播速度
},
}
}
4.0 效果图
以上是关于Vue使用vue-awesome-swiper最后一个元素显示不全问题的主要内容,如果未能解决你的问题,请参考以下文章