Comments (23)
v3.1.3仍然存在问题
强制update或者slideNext都没有效果
from vue-awesome-swiper.
activated() {
this.$nextTick(function() {
if (this.$refs.swiper) {
this.$refs.swiper.swiper.slideTo(this.realIndex, 1, false);
}
});
},
deactivated() {
this.realIndex = this.$refs.swiper.swiper.realIndex;
}
from vue-awesome-swiper.
@dingtwo 我会在下个版本增加此修复,但这可能需要点时间,因为我正在将项目规范化、国际化。
from vue-awesome-swiper.
v3.0.0 已解决此问题。
from vue-awesome-swiper.
可以换个思路,从浏览器的事件入手。 just like this:(vue-awesome-swiper版本:4.1.1,也验证3.1.3此方法也可生效,调整下swiper实例的获取方式即可)
export default {
name: "swiper-example-vertical",
title: "Vertical slider",
components: {
Swiper,
SwiperSlide
},
methods: {
linkGoTo(url) {
window.open(url, "_self");
}
},
data() {
return {
swiperOption: {
direction: "vertical",
loop: true,
// autoplay: false,
// 自动播放
autoplay: {
delay: 300,
disableOnInteraction: false
},
// 设置轮播
effect: "fadeEffect",
//滑动速度
// speed: 500,
loopedSlides: 3,
slidesPerView: 3,
observer: true,
observeParents: true
}
};
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper;
}
},
mounted: function() {
window.onpageshow = function(event) {
// console.log('page show')
// console.log(this.swiper.slideNext);
if (event.persisted) {
if (this.swiper) {
this.swiper.animating = false;
this.swiper.slideNext();
}
}
}.bind(this);
}
};
当然,当页面展示事件触发时,可以用slideTo(swiper.activeIndex)但是突然跳到某一页会令人感到突兀,而且swiper.activeIndex这个明明是个数字却无法作为slideTo入参,具体的数字才可以触发,很神奇不做讨论了。 this.swiper.animating = false;根据slideNext函数的打印发现加上这个才可以正常触发(或者swiper配置中可以设置)。
另外,除了事件中主动让它轮播到下一页,disableOnInteraction: false这个也要加上。
之前也尝试过上面的那些方法却无法为前端小妹解决问题,此方法可行故特告知。具体请看:https://www.jianshu.com/p/c4188216a600
from vue-awesome-swiper.
感谢反馈,即将修复。
from vue-awesome-swiper.
经测试,我这里没有重现所描述的问题,可否提供更详细的代码。
swiperOption: {
autoplay: 1000,
setWrapperSize :true,
autoHeight: true,
pagination : '.swiper-pagination',
paginationClickable :true,
mousewheelControl : true,
observeParents:true,
grabCursor : true,
// Disable preloading of all images
preloadImages: false,
// Enable lazy loading
lazyLoading: true
}
from vue-awesome-swiper.
你好,我的代码如下:
模版代码
<swiper :options="swiperOption">
<swiper-slide v-if="index==0" v-for="(item,index) in home.banners">
<a :href="item.url">
<img class="swiper-lazy" v-bind:src="item.pic_url" alt="">
</a>
</swiper-slide>
<swiper-slide v-if="index>0" v-for="(item,index) in home.banners">
<a :href="item.url">
<img class="swiper-lazy" v-bind:data-src="item.pic_url" alt="">
</a>
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
配置代码
swiperOption: {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
pagination: '.swiper-pagination',
paginationClickable: true,
// Disable preloading of all images
preloadImages: false,
// Enable lazy loading
lazyLoading: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 4000,
autoplayDisableOnInteraction: false
},
from vue-awesome-swiper.
2.1.0可以手动控制keep-alive的作用组件,可以用这个功能先解决问题。
from vue-awesome-swiper.
@cgygd 你这个问题处理了没有,我也遇到同样的问题,一直没找到解决的办法。
from vue-awesome-swiper.
@qiheng 没有,2.1.0可以手动控制keep-alive的作用组件,用这个功能先解决问题。
from vue-awesome-swiper.
@cgygd 手动控制keep-alive的作用组件,那就是说我整个页面就没有缓存了
<template> <div id="app"> <transition name="slide-left" mode="out-in"> <keep-alive> <router-view class="child-view"></router-view> </keep-alive> </transition> <x-loading :show="config.pageLoading"></x-loading> </div> </template>
from vue-awesome-swiper.
@qiheng 你可以尝试在 https://github.com/surmon-china/vue-awesome-swiper/blob/master/src/swiper.vue#L47 这里增加对应的生命周期钩子完成 swiper的 update 方法,如果可行,可以提交 PR.
from vue-awesome-swiper.
在生命周期activated 方法中调用 update 方法,亲测有效
activated() {
this.swiper.update()
},
from vue-awesome-swiper.
我也遇到过这个问题 不过我当时用的是vux里面的轮播图,现在也还没解决,好像部分机型会出现这个问题
from vue-awesome-swiper.
升级到 v3.0.0
from vue-awesome-swiper.
求助
1:3.0.0 loop为false时 还存在该问题
采取的解决方法是:
activated() {
this.$nextTick(function() {
let mySwiper = this.swiper;
mySwiper.autoplay.timeout = undefined;
mySwiper.autoplay.running = false;
mySwiper.autoplay.start();
})
}
2:但是 当loop置为true 时 又会出现存在这个问题。
from vue-awesome-swiper.
我最后把这一页的keepalive关了。。
from vue-awesome-swiper.
v3.1.3仍然存在问题
强制update或者slideNext都没有效果
from vue-awesome-swiper.
我又来了...,当轮播图操作后无法自动轮播,即使设置了disableOnInteraction: false,也不行,嗯...顺便有个需求,能否动态改变轮播时间
swiperOption: { autoplay: { delay: 2000, disableOnInteraction: false }, touchStartPreventDefault: false, loop: true, on: { slideChange: function () { } } },
目前虽然解决动态改变轮播间隔问题,但觉得不是理想中的方法..
from vue-awesome-swiper.
求助
1:3.0.0 loop为false时 还存在该问题
采取的解决方法是:
activated() {
this.$nextTick(function() {
let mySwiper = this.swiper;
mySwiper.autoplay.timeout = undefined;
mySwiper.autoplay.running = false;
mySwiper.autoplay.start();
})
}
2:但是 当loop置为true 时 又会出现存在这个问题。
请问这个问题现在解决了吗
from vue-awesome-swiper.
在生命周期activated 方法中调用 update 方法,亲测有效
activated() { this.swiper.update() },
我按照这个方法修改了代码 但还是不行,请问现在这个问题解决了吗?
from vue-awesome-swiper.
经排查,keepalive缓存的页面依旧会自动播放,导致返回缓存页面时realIndex对应不上。
解决办法:
activated() { if(this.swiper) { this.swiper.autoplay.start() } }, deactivated() { if(this.swiper) { this.swiper.autoplay.stop() } }
from vue-awesome-swiper.
Related Issues (20)
- Swiper does not re-render when the swiperOptions state change on IOS app
- The misuse of path of swiper.css causes the dependency was not found HOT 1
- swiper-pagination not show HOT 1
- loop+slidesPerView
- when slidesPerView is auto,use virtual errors HOT 1
- Can't resolve 'swiper/swiper-bundle.css'
- Nuxt 3 Support HOT 2
- Local Registration failed while global Registration succeeded
- Is swiper 7 currently supported ? HOT 2
- How to use stopOnLastSlide property?
- vue 2 swiper7 vue-awesome-swiper effect没有效果
- swiper7 allowSlideNext unable???
- How to modify the default value HOT 1
- Is vue3.0 supported? HOT 3
- cube effect ios is not click
- 更 HOT 1
- Vue-awesome-swiper on the Macbook, Monterey 12.2.1, M1 HOT 1
- To make it more accessible we should have the option to use ul and li as the tags for the slider and the slider items HOT 1
- Can't install vue-awesome-swiper 4.1.1 HOT 1
- IOS下轮播图在返回滑动的时候,图片显示当前激活图片但是随后又会跳转到上一张
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-awesome-swiper.