swiper高度自适应_微信小程序：swiper高度动态适配

最新推荐文章于 2023-06-25 17:09:55 发布
最新推荐文章于 2023-06-25 17:09:55 发布
阅读量971 收藏
点赞数
文章标签： swiper高度自适应
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36368404/article/details/111980126
版权

作者：Sinea

来源：segmentfault.com/a/1190000014985174

转载请注明出处，Thanks♪(･ω･)ﾉ

ps：没有在swiper中添加scroll-view是为了可以使用页面的下拉刷新，最终方法直接跳到方案四。(含代码片段)

初始方案

swiper高度固定，swiper-item默认绝对定位且宽高100%，每个swiper-item中内容由固定高度的child组成，然后根据child数量动态计算swiper高度，初始方案(由于rpx针对屏幕宽度进行自适应，child_height使用rpx方便child正方形情况下自适应)：swiper_height = child_height * child_num

屏幕效果仅在宽度375的设备(ip6、ipⅩ)完美契合，其他设备都底部会出现多余空隙，并且在上拉加载过程中，随着内容增加，底部空隙也逐渐变大。

方案二

开始以为是rpx适配显示问题，后通过文档中描述的WXSS 尺寸单位转化rpx为px(child_height使用rpx)：swiper_height = child_height * child_num * ( window_width / 750 )

然后并无变化，我们可以看到child_height在不同宽度屏幕下，显示的宽高尺寸是不一样的(px单位)，那就尝试使用box在各个屏幕的实际高度进行计算swiper高度，box的高度可以单独在页面中增加一个固定标签，该标签样式和box宽高保持一致并且隐藏起

最低0.47元/天 解锁文章
不进前一百不改名
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
swiper高度自适应_微信小程序swiper高度自适应，swiper的子元素高度不固定
weixin_39622398的博客
12-18 301
小程序 swiper 组件默认高度150px，并且如果子元素过高，swiper不会自适应高度解决方案一： (总体来说不够完美，适合满屏滑动)如果不是满屏的状态，用scroll-view IOS滑动兼容性不好，在IOS会有无法滑动的情况style="height:{{height}}px"bindchange="change"current-item-id="{{docid}}"duration=...
swiper切换不同的swiper-item时，高度根据页面内容自适应
weixin_56372270的博客
05-25 137
微信小程序swiper图片尺寸_微信小程序swiper组件中的img自定义尺寸（自适应）
weixin_36391252的博客
02-05 1985
swiper组件里的image默认宽度320，高度200，这无法满足我们的需求，就需要我们自己修改尺寸和属性了，这里记录下自己的解决办法。首先给image的width设置为100%，此时图片的大小会根据屏幕宽度自动适应大小了。height默认为200，如果需要调整的话直接设置到合适的尺寸即可。另外还有一个属性很重要，就是mode属性，mode有13种模式，具体文档中有介绍，这里不再阐述；我是使用w...
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
Alan_Walker688的博客
12-14 8176
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
#微信小程序# 轮播图swiper高度实现页面自适应
wsmazh的博客
01-18 1410
微信小程序学习笔记 轮播图swiper高度实现页面自适应 微信小程序中的轮播图一般使用swiper滑块视图容器来制作，官方文档如下：swiper | 微信开放文档 首先，swiper标签存在默认的宽度和高度。 width:100%; height:150px; 在轮播图中，我们所要展示的图片往往不会完全与轮播图的长宽相符，而且不同机型的屏幕大小也不尽相同，因此为了能够使得图片看起来赏心悦目，可以采用以下步骤来实现swiper的高度自适应。 第一步：获取轮播图中所要展示图片的宽度和高度 例如 width
微信小程序swiper轮播图高度自适应
夜空下的凝视
06-11 2266
说明：swiper默认高度150px，且无法更改。 解决办法： wxml中：注意 style=‘height:{{Height}}’、mode="widthFix"和 bindload='imgHeight’ <view class="container"> <swiper class="banner" indicator-dots="{{indicatorDots}}" in...
微信小程序-swiper自适应宽高
Shivy_的博客
11-13 2072
微信小程序-swiper自适应设置高度 效果图 需求背景 项目需要做一个swiper切换栏,点击/滑动的页面切换效果，可以使用swiper来实现，但是swiper默认高度为150，不会自适应高度，所以当页面数据过多，超过页面可视区域，会导致页面无法上下滑动的情况 解决办法 使用scroll-view包裹页面元素，并且动态设置swiper的高度，让其根据内容的高度自适应 代码部分 WXML: <view class='TabSwiper flex'> <view class="li
flex解决微信小程序ScrollView等组件高度自适应
jiaojiaoiso的博客
05-18 3376
//获取屏幕可用高度 let screenHeight = wx.getSystemInfoSync().windowHeight; 小程序页面开发时经常需要用的scroll-view 和 swiper这两个组件，官方文档显示这两个组件需要设置固定的高度才好用。 当数据列表高度不确定的时候，一开始我是对scroll-view或者swiper高度计算出固定数据。 //获取屏幕可用高度 let screenHeight = wx.getSystemInfoSync().windowHeight; ...
微信小程序中swiper组件高度根据图片自适应
少吃点肉的博客
03-12 1767
wxml： &lt;!-- banner图 --&gt; &lt;swiper style="height:{{imgHeight[current]}}rpx;" bindchange="bindchange"&gt; &lt;block wx:for="{{imgUrls}}" wx:key="that"&gt; &lt;swipe
【微信小程序scroll-view高度自适应】
qq_31629679的博客
06-25 3985
思路：找一个参考的布局通过uni.createSelectorQuery()获取其的高度，再通过uni.getSystemInfoSync().screenHeight获取屏幕高度，计算出大概的scroll_view之外高度即可（这个不能100%获取剩余的屏幕，通过适当的调整比例参数适配屏幕）注：如果需要100%适配就需要获取除scroll_view外的全部view的高度，用已获取的屏幕高度进行计算 （或将scroll_view之外的布局包裹在一个大的view中，这样就可以使用第二种情况进行处理）
微信小程序 扩展组件 tabs 中的 swiper 部分高度自适应
03-29
由于官方给了 swiper 固定高度150，且 swiper-item 都是 absolute 定位，所以实际应用中经常会碰到问题，在此记录一下修改方式。 一、正常 npm 下载 tabs 包，并用开发者工具构建 npm 二、修改构建出的目录 ...
微信小程序之swiper轮播图中的图片自适应高度的方法
08-27
通过这篇文章，我们可以了解到微信小程序Swiper轮播图图片自适应高度的方法，并且学会了如何使用wx.getSystemInfoSync().windowWidth来获取当前屏幕的宽度，以及如何使用setData（{ }）来动态设置Swiper的高度。
微信小程序小技巧《十九》实现图片高度自适应，带参数分享 ... ...
03-29
一：实现图片高度自适应 1. swiper轮播海报通过wx.getSystemInfo接口获取屏幕高度，高度依据图片宽高等比缩放   (此图片来源于网络，如有侵权，请联系删除! ) 运行于app.js，全局保存 // 设备信息 wx.getSystemInfo...
微信小程序swiper实现文字纵向轮播提示效果
12-28
小程序顶部总会看到滚动的通知栏，一般单条的都会用跑马灯去实现，但面对多条的内容，就需要用轮播去实现，轮播自然是swiper了，查了查，还真有vertical这个属性，swiper真好用。 效果 体验 代码 wxml ...
微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)
06-19
微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信...
数理方法习题 前六章.pdf
08-03
数理方法习题 前六章
某大型制造企业IT蓝图规划及实施路线.pptx
最新发布
08-03
某大型制造企业IT蓝图规划及实施路线.pptx
基于Springboot和Vue的社区团购系统设计源码 社区团购系统设计代码（98分期末优秀大作业）
08-03
社区团购系统设计源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
微信小程序swiper高度自适应
09-05
微信小程序的swiper组件默认是根据图片的高度来设置swiper的高度的，所以如果要实现swiper高度自适应的效果，可以采用以下几种方式： 1. 使用image组件获取图片的高度：在swiper-item中使用image组件来展示图片，并设置mode为aspectFill，然后通过image组件的bindload事件获取到图片加载后的高度，并将该高度动态赋值给swiper组件的高度属性。例如： ```html <swiper style="height:{{swiperHeight}}px;" current="{{current}}"> <block wx:for="{{imageList}}" wx:key="*this"> <swiper-item> <image src="{{item}}" mode="aspectFill" bindload="getImageHeight"></image> </swiper-item> </block> </swiper> ``` ```javascript Page({ data: { swiperHeight: 0, current: 0, imageList: ['image1.png', 'image2.png', 'image3.png'], }, getImageHeight: function(e) { const { index, height } = e.currentTarget.dataset; this.setData({ swiperHeight: height }); } }) ``` 2. 使用wx.createSelectorQuery获取图片高度：在onLoad生命周期函数中使用wx.createSelectorQuery来获取图片的高度，并将该高度动态赋值给swiper组件的高度属性。例如： ```javascript Page({ data: { swiperHeight: 0, current: 0, imageList: ['image1.png', 'image2.png', 'image3.png'], }, onLoad: function() { const query = wx.createSelectorQuery(); query.select('.swiper-item-image').boundingClientRect(res => { this.setData({ swiperHeight: res.height }); }).exec(); } }) ``` ```html <swiper style="height:{{swiperHeight}}px;" current="{{current}}"> <block wx:for="{{imageList}}" wx:key="*this"> <swiper-item> <image class="swiper-item-image" src="{{item}}" mode="aspectFill"></image> </swiper-item> </block> </swiper> ``` 以上两种方式都可以实现swiper高度自适应的效果，你可以根据自己的实际需求选择其中一种方法来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值