swiper点击出现空白的解决办法

最新推荐文章于 2024-04-17 18:15:48 发布

小怪兽学前端

最新推荐文章于 2024-04-17 18:15:48 发布

阅读量2.2k

点赞数 1

分类专栏： js常见问题文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_41970780/article/details/111317279

版权

本文介绍了在使用swiper时遇到点击后页面显示空白的常见原因和解决方法，针对JavaScript和HTML相关问题进行探讨。

摘要由CSDN通过智能技术生成

swiper点击出现空白的解决办法

<div class="swiper-container2 ">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide-active">全部</div>
        <div class="swiper-slide">电商类</div>
        <div class="swiper-slide">金融类</div>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小怪兽学前端

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

关于vue-awesome-swiper使用遇到的一些问题和心得（手动设置宽、手机翻转问题、回调函数、滑动）

qq_27339423的博客

06-13

5481

1.首先项目用到的"vue-awesome-swiper": "^3.1.3" ，对应官网的swiper 3.0 地址点击打开链接2.基本配置就无需多言了，大家可以参考github上的示例 vue-awesome-swiper git地址2.遇到的第一个问题是UI设计中需要做如下图的样式：因为右侧需要一部分露出来，而插件是根据屏幕的宽自动给轮播列表项生成的宽，所以宽设置的话也会被行内样式覆盖，...

swiper 的slide 宽高不一致导致切换出现空白页

yangzixiansheng的博客

10-28

1114

原因：遇到三个swiper互相嵌套，大swiper包含一个水平一个垂直方向的小swiper 两个swiper互相影响，水平swiper向下滚动变成垂直swiper中间出现很大空白页的 1.第一是想设定水平swiper高度，但我大swiper没设置自动高度，也不能固定，无果。 2.设置speed的速度，只要我速度够快，没有谁的眼能赶得上我！也算另类实现效果 ...

1 条评论您还未登录，请先登录后发表或查看评论

有关swiper组件显示空白的问题

HXH_csdn的博客

12-13

3478

今天遇到一个swiper组件离开当前页面再一次进来的时候出现空白的问题,再次进入页面的时候我这里是可有会渲染不同的数据导致swiper-item会出现一个或多个,查看文档才发现原来是current (当前所在滑块的 index)的改变引发的问题,其实刚开始的时候调试器也有警告的,只是当时没有在意,在swiper自动滑动的时候current 也会做出改变, 在current 大于0的时候再次返回重新...

swiper自动循环轮播--第一页swiper空白

最新发布

qq_39650208的博客

04-17

679

现象复现：如果swiper-slide设置的是写死的值，则不会有问题，有问题的现象是使用图片，会给第一页和最后一页加个swiper-slide，但是没有赋予图片的属性值，导致不显示。1、如果第一页图片不多的话，可以针对性的给第一页图片赋值显示。注意：第一个标签添加的是slide列表的最后一个图片, 后一个标签则相反添加的是第一个图片.2、其实img标签是好使的，可以切换成img标签。当最后一个swiper 跳转到第一个 swiper时。，设置after属性来设置占位图，解决问题。采用swiper组件。

【惊呆了】swiper设置loop时出现空白页面解决

qq_49279305的博客

04-25

4262

swiper设置loop时出现空白页面解决在我们使用swiper的时候会通常会有循环切换、无限循环的需求。我们通过loop让swiper无限循环时，可能会出现空白页面，这样体验起来很不舒服，这个可通过loopAdditionalSlides属性解决。 loopAdditionalSlides 会把你的 slides复制若干个，前后复制的个数不会大于原来的总个数。 var mySwiper = new Swiper('.swiper', { loop: true, loopAdditi

swiper开启loop后有一组内容空白，swiper4在低版本webview空白

笔记库

05-10

787

swiper白屏,内容空白解决方案

swiper 设置 loop 为 true 时出现空白页

MrQiu的博客

01-13

3235

1.问题如下图所示循环滑动到最后一个的时候，会没显示下一个，滑动一下才出现。 2.解决方案设置一下loopAdditionalSlides: 1 loop 模式下会在 slides 前后复制若干个 slide,，前后复制的个数不会大于原总个数。默认为 0，前后各复制 1 个。0,1,2 --> 2,0,1,2,0 例：取值为 1，0,1,2 --> 1,2,0,1,2,0,1 值越大， dom 会复制的越多，出现空白的几率就越小。 ...

swiper插件loop为true时循环滚动首尾一瞬间空白

weixin_44276396的博客

04-11

1040

swiper循环滚动空白问题

Swiper8在Vue3中使用loop不显示的解决方法

NovaLog的博客

08-18

891

在项目中使用到了Vite+Swiper8

在vue中使用swiper插件并解决轮播图第一张一闪而过的问题

m0_46656871的博客

01-14

1334

在vue中使用swiper3插件引入swiper插件`` npm install swiper@3 --save-dev //选择版本号下载在min.js中引入swiper import 'swiper/dist/css/swiper.min.css' import 'swiper/dist/js/swiper.min.js' 3.在页面中使用 import Swiper from 'swiper' // 在需要引入的子页面中导入 4.写一个方法初始化swiper swiper(){

Vue使用swiper实现轮播效果

LiXiaoJin's Blog

08-07

1181

最近有个需求需要将网站首页的 banner 弄成轮播效果的，同事推荐使用 swiper 来实现，记录一下。 swiper 官网地址：https://www.swiper.com.cn/ 1、swiper 初始化文章转载自：Swiper中文网 [https://www.swiper.com.cn] <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-sli.

vue-awesome-swiper 的bug：轮播图自动轮播到最后一页就不轮播了？

即使萍水也不要相逢的博客

02-25

1971

项目场景：在开发vue项目的时候，需要做一个轮播图，因此小编使用了 vue-awesome-swiper 三方库（链接：https://github.com/surmon-china/vue-awesome-swiper）； html 代码如下： <swiper :options="swiperOptions" class="banner"> <swiper-slide v-for="value in banners" :key="value.bannerId" c

vue-awesome-swiper 首图与尾图切换时，空白，需滑动才显示解决方法

qtfiot的博客

10-13

762

vue-awesome-swiper 首图与尾图切换时，空白，需滑动才显示解决方法

swiper定义loop为true时有空白的页

babulongbo的博客

03-28

8873

当使用swiper定义loop为true是，一张或最后一张会出现空白页，要解决这个问题可以使用 loopAdditionalSlides: 2, loopAdditionalSlides的是值越大，出现空白的几率越小，但是也不要太大，否则dom会复制的太多...

Swiper：无限循环滚动时出现空白页/页面内容不刷新

smm的博客

04-11

6942

Swiper：无限循环滚动时出现空白页/页面内容不刷新

vue swiper循环loop不生效，出现空白页

wxy964666897的博客

12-09

3172

原因1：可能是没有在外层加上vi-if判断图片所在的数组是否存在；原因2：可能使用了v-lazy，不能使用v-lazy；参考配置： swiperBannerOption:{ slidesPerView:1, loopAdditionalSlides:2, spaceBetween:0, notNextTi...

vue-awesome-swiper遇到的坑！！！（包括swiper display: none后在显示的bug）