swiper滚动块宽度踩坑记录

最新推荐文章于 2024-06-21 16:18:17 发布

郑板桥30

最新推荐文章于 2024-06-21 16:18:17 发布

阅读量711

点赞数 1

分类专栏：前端学习文章标签：前端轮播图 swiper

本文链接：https://blog.csdn.net/m0_68634366/article/details/131723797

版权

前端学习专栏收录该内容

30 篇文章 0 订阅

订阅专栏

背景：需要给swiper增加图片懒加载优化性能，这里使用的是swiper自带的 lazy api。但是加了懒加载后发现滚动块的宽度变长了，这里的原因是我只给滚动条设置了宽度的样式但是没有给滚动块设置宽度的样式。于是我按照官方文档的做法给滚动块设置宽度。

mySwiper.scrollbar.$dragEl.css('width','12px');

加了宽度后刚进入页面时是正常的，但是滚动的时候宽度又边长了，如下图所示。

可以看到刚开始时滚动块的宽度是正常的，但是在滑动的时候滚动块的宽度就变了。在网上查阅时好像没发现类似的问题，然后我在看官方文档的时候发现原来swiper提供了一个 mySwiper.scrollbar.updateSize() 方法来更新滚动条的size。所以解决方法也很简单，在设置完滚动块的宽度后手动调用一次 mySwiper.scrollbar.updateSize() 就可以了

mySwiper.scrollbar.$dragEl.css('width','12px');
mySwiper.scrollbar.updateSize()//更改宽度后手动调用这个方法

总结：多思考，多读官方文档

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

郑板桥30

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
swiper滚动块宽度踩坑记录

swiper滚动块宽度踩坑记录
复制链接

扫一扫

专栏目录

swiper监听滚动条_swiper Scrollbar滚动条组件详解

weixin_39594191的博客

12-18

1137

本文实例为大家分享了swiper Scrollbar滚动条组件的具体代码，供大家参考，具体内容如下1、scrollbar为Swiper增加滚动条。类型：object。2、elscrollbar容器的css选择器或HTML元素。类型：string/HTML Element，默认：.swiper-scrollbar。3、hide滚动条是否自动隐藏。类型：boolean，默认：true(会自动隐藏)，f...

swiper 窗口宽度变化，页面宽度高度变化导致自动滑动解决方案

10年职场两茫茫，35岁凄凉奈若何

08-04

641

swiper 窗口宽度变化，页面宽度高度变化导致自动滑动解决方案

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

微信小程序实现swiper的swiper-item宽度不固定，2.5轮播图，循环自动轮播

最新发布

qq_41537593的博客

06-21

277

微信小程序实现swiper的swiper-item宽度不固定，2.5轮播图，循环自动轮播

动态请求数据渲染swiper轮播图导致宽度计算问题

ddyy2695734664的博客

02-02

1281

移动端一个swiper轮播图，因为是动态请求回来的数据，所以一开始用的vue.nextTick,但是发现一直有问题，单个swiper-slider的宽度，动态渲染的a标签宽度一直是120px，如图就在vue.nextTick里加了个延时，一直延时到4s效果才能正常显示，但在网速慢的时候还是会出现上述问题，并且延时渲染导致页面效果也不好，再后来以为是页面上请求的图片太多了，导致页面渲染的很慢，把所有的图片都用懒加载处理了，轮播图问题依然不行，就各种查，各种试，后来发现了几个参数： slidesPerVie

动态获取屏幕宽度—轮播图一次只移动一个设定的宽度并自适应不同屏幕

Jolly_zhang的博客

01-31

303

2.如何让width的值随屏幕宽度变化而变化呢？比如设计图尺寸为375，户型图宽度为200，那户型图占设计图的比例，就是width宽度占屏幕宽度的比例：200/375 = width/屏幕宽度。得出屏幕宽度:width=‘(200/375)*屏幕宽度’制作如下图的效果，每次像左滑动移动一个户型的距离该怎样实现呢？这里还是用swiper来实现，只是设定了swiper宽度。1.在van-swiper标签上添加：width="**"属性，但是直接写数字就不能自适应不同屏幕的尺寸的。3.获取屏幕宽度，如下图。

微信小程序swiper组件中的img自定义尺寸（自适应）

6块腹肌的博客

01-26

9503

swiper组件里的image默认宽度320，高度200，这无法满足我们的需求，就需要我们自己修改尺寸和属性了，这里记录下自己的解决办法。首先给image的width设置为100%，此时图片的大小会根据屏幕宽度自动适应大小了。height默认为200，如果需要调整的话直接设置到合适的尺寸即可。另外还有一个属性很重要，就是mode属性，mode有13种模式，具体文档中有介绍，这里不再阐述；我是使用w...

swiper Scrollbar滚动条组件详解

12-09

本文实例为大家分享了swiper Scrollbar滚动条组件的具体代码，供大家参考，具体内容如下 1、scrollbar 为Swiper增加滚动条。类型：object。 2、el scrollbar容器的css选择器或HTML元素。类型：string/HTML Element，...

swiper滚动天气效果

09-08

Swiper滚动天气效果是一种在网页或应用中实现的动态展示天气情况的技术，它结合了Swiper.js库的滑动效果和实时天气数据，为用户提供了一种新颖、直观的天气信息展示方式。Swiper.js是一个流行的JavaScript框架，常...

Swiper左右滚动文字时间轴代码

06-11

在这个“Swiper左右滚动文字时间轴代码”项目中，Swiper被用来构建了一个企业历程展示的时间轴，用户可以通过点击左右箭头或者在触摸设备上滑动来切换不同的时间点。 1. **Swiper组件**: Swiper的核心功能是提供...

Swiper-Scrollbar:Swiper 的滚动条插件

06-25

注意力！此插件不再维护，因为此功能已在 Swiper 3 核心中。 Swiper-Scrollbar Swiper 的滚动条插件滚动条是 iDangero.us Swiper 1.7+ 的超小（约 1Kb 压缩和 gzipped）和免费 JavaScript 插件，它为您的 Swiper 滑块（或应用程序）添加了完全可定制的滚动条。演示和使用笔记提供 UMD 和非 UMD 版本。建造本项目使用grunt构建一个 dist 版本。首先你需要有grunt-cli ，你应该全局安装它。 $ npm install -g grunt-cli 然后安装所有依赖项， $ npm install $ grunt 结果在dist文件夹中可用。构建所有版本要创建所有版本，您可以使用dist任务： $ grunt dist 这个任务相当于： $ grunt build

swiper新闻内容图片滚动代码

07-24

Swiper 是一个强大的触摸滑动库，常用于创建高质量的响应式内容滚动效果，尤其在移动设备上表现优秀。在本项目"swiper新闻内容图片滚动代码"中，它结合了jQuery，提供了一种高效的方式，将新闻内容和图片以组合的...

微信小程序swiper组件实现图片宽度自适应

lsw51988的博客

07-06

1469

转自 http://blog.csdn.net/xz_src/article/details/73827917 微信小程序图片宽度自适应的实现实例代码： wxml 代码： [html] view plain copy swiper indicator-dots="{{indicatorDots}}" autoplay="{{au

uniapp动态获取swiper的高或宽

前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！

10-15

1259

在布局设置一下高度为动态的 <swiper class="tabs" @change="swipers" :current="actvic" :style="'height: ' {{ height}}'px;'"> </swiper> 声明height函数 data() { return { height: 500, } },

swiper轮播图自定义slide宽度太长显示不完全，太短显示空白问题

qq_45560350的博客

03-30

5457

写了那么多次轮播图，每次出错都不长记性，既然如此好记性不如烂笔头，把错误以及错误出现的原因和解决方法梳理记下来，加深一下记忆。问题表现从swiper官网上复制黏贴下来了一个free模式的轮播图 js代码如下 var swiper = new Swiper('.swiper-container', { slidesPerView: 3, spaceBetween: 30, freeMode: true, pagination: { el:

swiper滚动条

hu_Time的博客

10-26

806

html: <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> test1 </div> </div> <div class="swiper-...

swiper 模拟滚动条

weixin_47953779的博客

12-24

386

需要引入的文件 css部分 <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.0.0/css/swiper.css" rel="stylesheet"> <style> .swiper-container { width: 500px; height: 400px; margin-left: 0; } .swiper-slide { backgro

swiper 滚动条

07-27

您好！对于 Swiper 滚动条的问题，您需要使用 Swiper 的 scrollbar 参数来实现。下面是一个简单的示例代码： ```html <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div>  </div>  <div class="swiper-scrollbar"></div> </div> ``` ```css .swiper-container { width: 100%; height: 300px; } .swiper-scrollbar { position: relative; width: 100%; height: 4px; background: #ccc; } .swiper-scrollbar-drag { position: absolute; left: 0; top: 0; width: 0; height: 100%; background: #333; } ``` ```javascript var swiper = new Swiper('.swiper-container', { scrollbar: { el: '.swiper-scrollbar', draggable: true, }, }); ``` 在上述代码中，我们使用了 Swiper 的 scrollbar 参数来创建滚动条。`.swiper-scrollbar` 是滚动条的容器，`.swiper-scrollbar-drag` 是滚动条的拖拽元素。您可以根据需要自定义滚动条的样式。希望这个回答能帮到您！如果您还有其他问题，请随时提问。