Swiper中文论坛

标题: swiper4怎么重新初始化 [打印本页]

作者: 学习使人进步 时间: 2020-5-26 15:24
标题: swiper4怎么重新初始化
更改swiperOptions属性，怎么重新初始化

作者: tdan555528 时间: 2020-5-29 01:04
看官网，写得很清楚了。

作者: 学习使人进步 时间: 2020-6-8 15:32

tdan555528 发表于 2020-5-29 01:04
看官网，写得很清楚了。

没有找到才问的

作者: 李青云 时间: 2020-11-9 17:34
同问，有没有解决办法呢？？？

作者: 菜鸟前端 时间: 2021-3-25 10:08

html部分

<swiper class="swiper"

ptions="swiperOption" ref="mySwiper">

<swiper-slide>

<div

class="echarts"

style="width: 400px; height: 270px"

></div>

</swiper-slide>

<div

class="swiper-pagination swiper-pagination-bullets"

slot="pagination"

></div>

</swiper>

</div>

Js部分

import { Swiper, SwiperSlide } from "vue-awesome-swiper";

import "swiper/dist/css/swiper.css";

export default {

components: {

Swiper,

SwiperSlide,

data() {

return {

swiperOption: {

slidesPerView: 1,

spaceBetween: 30,

loop: true,

pagination: {

el: ".swiper-pagination",

clickable: true,

renderBullet(index, className) {

return `<span class="${className} swiper-pagination-bullet-custom">${

index + 1

}</span>`;

navigation: {

nextEl: ".swiper-button-next",

prevEl: ".swiper-button-prev",

/*autoplay: {

delay: 2500,

disableOnInteraction : false

},*/

autoplay: true,

};

methods: {

鼠标移入暂停轮播

on_top_enter() {

this.$refs.mySwiper.$swiper.autoplay.stop();

鼠标移出开启轮播

on_top_leave() {

this.$refs.mySwiper.$swiper.autoplay.start();

}

作者: 菜鸟前端 时间: 2021-3-25 10:09
<swiper class="swiper" options="swiperOption" ref="mySwiper">

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)