小程序之swiper自适应高度

最新推荐文章于 2023-03-02 13:03:56 发布

原创最新推荐文章于 2023-03-02 13:03:56 发布 · 440 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在小程序中使用WXML和WXSS实现图片自适应屏幕宽度的方法，通过精确计算保持图片原始比例，适用于不同分辨率设备。关键在于利用CSS calc函数结合屏幕宽度vw单位和图片原始尺寸进行比例缩放。

/** wxml: **/
<swiper>
  <swiper-item>
    <image mode="widthFix" src="图片url地址" />
  </swiper-item>
</swiper>

/** wxss: **/
/** 屏幕宽度：100vw **/
/** 原图宽高：1125*352 **/
swiper {
	width: 100%;
	height: calc( 100vw * 352 / 1125 );
}
swiper image {
	width: 100%;
}
/**
	计算公式：
		屏幕宽度 * 原图高度 / 原图宽度
**/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

奥特曼老师

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序原生swiper高度自适应图片，不同屏幕适配，正方形1:1等比例图片轮播

coderYYY的博客

05-12

1064

一开始只设了图片的发现还是不能完全显示图片，发现问题所在是swiper高度得设，不然默认就是150px，超出部分会被截掉，不会被图片自动撑开的。而轮播图片有时候是后台维护，不是固定的，这个高不能写死。网上其他教程思路是对的，但是是通过css的calc写死计算，不灵活本教程将动态获取图片宽高和适配不同屏幕计算出swiper的高我们可以获取图片在设备上的宽作为swiper高度就可以了首先，图片比例是固定的，比例=swiper 宽度 / swiper 高度 = 原图宽度 / 原图高度那么。

微信小程序-swiper自适应设置高度

weixin_44622984的博客

06-17

5462

需求背景项目需要做一个swiper切换栏,但是每个swiper-item中有一个类似手风琴风格的收缩栏,展开后其内容不定,高度不定,无法预知,由于微信小程序的swiper组件并不是自适应高度的,所以就需要通过某些方法使其自适应 首先要动态设置swiper高度,就应该先将swiper组件的高度设置为动态值,并根据收缩栏收起时的最小高度初始化为一个默认值 <swiper bindchange="swiperChange" previous-margin="20px" next-margin="10px"

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

微信小程序-swiper自适应宽高

Shivy_的博客

11-13

2758

微信小程序-swiper自适应设置高度效果图需求背景项目需要做一个swiper切换栏,点击/滑动的页面切换效果，可以使用swiper来实现，但是swiper默认高度为150，不会自适应高度，所以当页面数据过多，超过页面可视区域，会导致页面无法上下滑动的情况解决办法使用scroll-view包裹页面元素，并且动态设置swiper的高度，让其根据内容的高度自适应 代码部分 WXML: <view class='TabSwiper flex'> <view class="li

小程序多个swiper高度自适应

this_ITBoy的博客

05-29

1040

之前做个一个多个tab的列表页，每个tab下的内容对应的就是swiper，而小程序的swiper的高度默认是150px，不能自适应内容高度，最开始我们的列表内容每个卡片的高度都是差不多的，当时做的是把每个卡片高度固定400px，然后用固定的高度*每个tab下卡片的数量来得到每个swiper的高度，具体博客链接：https://blog.csdn.net/this_ITBoy/article/details/103869457。但是，后来出了新的需求，如图：可以看到，第一个卡片加入了物流的信息...

swiper高度自适应_微信小程序之swiper组件高度自适应

weixin_39870092的博客

12-18

411

swiper默认最小高度150要求：swiper高度自适应wxmlwxss.swiper image {width: 100%;height: auto;}wxjsdata: {//图片地址imgList: ['/images/wyh-img_bg.png', '/images/wyh-img8.png', '/images/wyh-img_shop1.png', '/images/wyh-img...

微信小程序Swiper高度自适应

weixin_34075551的博客

03-09

678

情境说明众所周知,在微信小程序swiper组件中需要使用定高来使swiper-item中的内容得到展现，否则就会出现内容无法显示或者显示不全的问题。这个问题在页面分页加载时显得尤为棘手，由于大多数内容基本为列表输出的内容具有一定的规律性，通常的解决方式是获取数据数组长度，根据数据长度来动态改变每页的长度，但是每种机型的尺寸不一，而微信使用的是rpx,每种机型高度不一,dpr也不一样，比如iPho...

微信小程序之swiper轮播图中的图片自适应高度的方法

08-27

微信小程序Swiper轮播图图片自适应高度方法微信小程序中的Swiper轮播图是非常常用的功能，但是官方提供的示例中，Swiper的高度是固定的150px，这样如果传入的图片大于这个高度就会被隐藏。为了解决这个问题，我们...

微信小程序swiper控件高度自适应

热门推荐

lanyu96

08-10

2万+

在小程序开发文档中，swiper控件默认高度为150，高度必须设置具体的值，所以为了适应不同分辨率的设备，通过动态的获取屏幕空白部分高度在设置swiper控件的高度主要用到两个API： 1、getSystemInfo(获取当前设备的屏幕信息) 2、createSelectorQuery（这里的作用是获取其他控件的高度）在wxml文件中用一个view控件将表头包裹起来，然后设置class...

小程序swiper（tab）高度自适应

H_c_l的博客

08-21

508

swiper高度问题一直困扰我。今天终于有时间来解决一下。因为他的高度不能固定死，写死其他数据展示不完全，不写或者100%，auto都不行。翻了一堆资料也查了很多，最后总结一下。 1.很多人都说用一种方法。就是高度*数量，也就是所说的获取数据数组长度，根据数据长度来动态改变每页的长度，因为字号啊什么的在各个手机显示不一定都相同，总感觉不是解决问题的最佳方法。 2.使用Swiper+scroll-v...

JS 行为(函数）

大宇

08-13

1569

微信小程序生命周期函数 Page({ /** 页面的初始数据 */ data: { }, /** 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log(options); }, /** 生命周期函数--监听页面初次渲染...

微信小程序swiper设置自适应高度，swiper-item高度设置为100%，小程序swiper的hight:100%无效，swiper自适应屏幕高度

Yedge的博客

03-02

6044

小程序获取屏幕的高度，在页面加载的时候就获取这个值。然后让swiper应用这个高度，使得swiper高度自适应填充全屏

swiper高度自适应_微信小程序之swiper轮播图中的图片自适应高度的方法

weixin_39944146的博客

12-18

1169

小程序中的轮播图很简单，官方都有例子的，但是唯一的缺陷就是swiper是固定死的150px高度，这样如果传入的图片大于这个高度就会被隐藏。辣么，怎样让图片自适应不同分辨率捏。我的思路是：获取屏幕宽度，获取图片的宽高，然后等比设置当前屏幕宽度下swiper的高度。1.结构 //bindload是绑定图片加载的事件,记得给image加上mode=“widthFix”这个属性哦，还有就是设置这个ima...

小程序swiper高度自适应

xjf106的博客

12-10

350

1、wxml部分 <block wx:for="{{list}}" wx:key="index"> <view class="list-item-m" style="height: {{imgheights[index]}}rpx">  <swiper data-idx="{{index}}" bindchange="swiperChangeEv" style="height: {{imgheights[index]}

微信小程序swiper自适应高度

大湿胸的博客

11-26

2108

swiper组件如果没有高度是不显示的，网上有的朋友会用js去动态获取图片高度再给swiper设置高度（这种方法繁琐）我下面用css来让swiper自适应（bannerList为存放图片的数组，backgroundImg为图片地址）： 1.在外侧给个容器，设置position为relative 2.取出第一个图片，设置宽度100%,mode为widthFix（高度自适应） 3.给swip...

swiper高度自适应_微信小程序swiper高度自适应，swiper的子元素高度不固定

weixin_39622398的博客

12-18

570

小程序 swiper 组件默认高度150px，并且如果子元素过高，swiper不会自适应高度解决方案一： (总体来说不够完美，适合满屏滑动)如果不是满屏的状态，用scroll-view IOS滑动兼容性不好，在IOS会有无法滑动的情况style="height:{{height}}px"bindchange="change"current-item-id="{{docid}}"duration=...

swiper自适应高度

weixin_43492777的博客

08-25

247

swiper-slide{height:1px} /* 随意指定一个height值即可 */

swiper高度自适应

zoepriselife316的博客

08-24

3237

swiper高度自适应

小程序 swiper组件项实现高度自适应

qq_18342353的博客

03-10

243

问题背景使用swiper组件实现微博整页切换效果。解决方法 wxss内： swiper{ width: 100%; height: 100%; } swiper-item{ overflow: scroll; } 问题解决！

小程序 swiper高度自适应

12-14

小程序中的 Swiper 是一款非常流行的滑动视图组件，它可以用于实现滑动导航、轮播图、滑块等效果。要实现 Swiper 高度自适应，可以通过以下方法： 1. 使用 flex 布局：在小程序中，可以使用 flex 布局来控制 Swiper 的高度。可以通过设置 Swiper 的 flex 属性为 1，使它能够自适应容器的高度。同时，还可以设置其他属性，如 align-items 和 justify-content，以调整 Swiper 在容器中的位置和排列方式。 2. 设置固定高度：如果需要固定 Swiper 的高度，可以直接在 Swiper 组件中设置高度属性。可以在开发小程序时，根据屏幕尺寸和 Swiper 的内容，设置一个合适的固定高度。 3. 使用自适应高度类：小程序开发中，可以通过引入第三方库或自定义样式类来实现 Swiper 的高度自适应。可以通过添加一个自定义的类名，并在样式中设置该类的 height 属性为 100%，使 Swiper 能够根据容器的高度自动调整自身的高度。需要注意的是，在使用第三方库或自定义样式类时，需要确保引入的库或样式文件在小程序中是可用的，并且要遵循小程序的组件规范和样式规范。总之，实现小程序 Swiper 高度自适应的方法有多种，可以根据具体情况选择合适的方法来实现。