使用微信小程序swiper组件实现轮播图时带来的swiper与image标签自带的默认宽高引问题

于 2024-04-05 14:06:14 发布
阅读量322 收藏 3
点赞数 5
分类专栏： 程序员 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84091468/article/details/137399640
版权

思想：将图片的额宽高等比例变成swiper的宽高（即使得图片与swiper的宽高比一致）

在这里插入图片描述

  1. 先看原始图片的宽高，计算出其宽高比

比如这里我选取的图片宽高为：414*183，那么其宽高比为414/183=2.26…-----约等2.3

这里注意，一般宽高比为2.多的，其设计稿宽度一般为750px）

在这里插入图片描述

2.因此，使用calc计算的swiper的高度

最低0.47元/天 解锁文章
2401_84091468
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
swiper高度自适应_微信小程序之swiper轮播图中的图片自适应高度的方法
weixin_39944146的博客
12-18 1059
小程序中的轮播图很简单，官方都有例子的，但是唯一的缺陷就是swiper是固定死的150px高度，这样如果传入的图片大于这个高度就会被隐藏。辣么，怎样让图片自适应不同分辨率捏。我的思路是：获取屏幕宽度，获取图片的宽高，然后等比设置当前屏幕宽度下swiper的高度。1.结构 //bindload是绑定图片加载的事件,记得给image加上mode=“widthFix”这个属性哦，还有就是设置这个ima...
手把手带你学习微信小程序 —— 八 （swiper组件 轮播图的实现）
最新发布
afsdfrsg的博客
04-21 973
机会是留给有准备的人，大家在求职之前应该要明确自己的态度，熟悉求职流程，做好充分的准备，把一些可预见的事情做好。对于应届毕业生来说，校招更适合你们，因为绝大部分都不会有工作经验，企业也不会有工作经验的需求。同时，你也不需要伪造高大上的实战经验，以此让自己的简历能够脱颖而出，反倒会让面试官有所怀疑。你在大学时期应该明确自己的发展方向，如果你在大一就确定你以后想成为Java工程师，那就不要花太多的时间去学习其他的技术语言，高数之类的，不如好好想着如何夯实Java基础。请转发本文支持一下。
小程序 swiper 图片高度问题
weixin_40623562的博客
12-07 110
var swiperH = winWid * imgh / imgw + “px”　 //等比设置swiper的高度。//即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度 --> swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度。//获取当前屏幕的宽度。swiperHeight: swiperH //设置swiper高度。
微信小程序swiper组件中的img自定义尺寸（自适应）
6块腹肌的博客
01-26 9415
swiper组件里的image默认宽度320，高度200，这无法满足我们的需求，就需要我们自己修改尺寸和属性了，这里记录下自己的解决办法。首先给image的width设置为100%，此时图片的大小会根据屏幕宽度自动适应大小了。height默认为200，如果需要调整的话直接设置到合适的尺寸即可。另外还有一个属性很重要，就是mode属性，mode有13种模式，具体文档中有介绍，这里不再阐述；我是使用w...
微信小程序swiper组件实现图片宽度自适应
weixin_30439067的博客
07-09 396
wxml代码： <!--pages/swipe/swipe.wxml--> <view> <swiper circular="true" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}...
小程序中swiper组件中图片宽高的设置
m0_46591425的博客
10-08 1968
小程序或uniapp swiper中图片铺不满
【微信小程序】swiper的使用
qq_57676486的博客
09-17 3108
1.swiper的基本使用。----scss语法。
微信小程序 swiper 组件遇到的问题及解决方法
01-03
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ swiper 组件高度被限制为150px了，所以内容无法撑开。 解决办法 给...
微信小程序 swiper组件构建轮播图的实例
12-29
微信小程序 swiper组件构建轮播图的实例 实现效果图： wxml基础文件： <swiper indicator-dots=true interval=1000 autoplay=true indicator-active-color=red> <swiper><image src=/images/1.jpg></image></...
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
11-20
微信小程序用swiper组件实现仿抖音短视频上下划动整页切换视频功能demo 利用swiper组件可简单快速编写仿抖音短视频的功能 自动播放当前页视频 翻页停止播放当前页视频 并自动播放下页视频 有其他需求也可用 cover-...
微信小程序实现的3d轮播图效果示例【基于swiper组件】
01-20
本文实例讲述了微信小程序实现的3d轮播图效果。分享给大家供大家参考，具体如下： 前面写过一篇3d轮播，就是这篇，使用的方法比较笨拙，而且代码不简洁。这次发现swiper也能实现同样的效果。故记录一下。 先看看效果...
微信小程序 swiper组件详解及实例代码
12-29
微信小程序 swiper组件 常用属性： 效果图：  swiper.wxml添加代码： <swiper indicator-dots={{indicatorDots}} autoplay={{autoplay}} interval={{interval}} duration={{duration}} bindchange=...
微信小程序swiper使用网络图片不显示问题解决
01-19
这篇文章主要介绍了微信小程序swiper使用网络图片不显示问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 wxml代码： <swiper indicator-dots=true} ...
微信小程序swiper实现滑动放大缩小效果
12-29
效果图如下所示： 具体代码如下所示： <swiper class=swiper-block previous-margin=90rpx next-margin=90rpx current=0 bindchange=swiperChange> <swiper class=swiper-item> <image mode=aspectFill src={{...
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
12-29
本文实例讲述了微信小程使用swiper组件实现图片轮播切换显示功能。分享给大家供大家参考，具体如下： 1、效果展示 2、关键代码 index.wxml： <swiper indicator-dots=trueautoplay interval=3000 duration=600 xss...
微信小程序中的swiper组件详解
11-28
微信小程序中的swiper组件 微信小程序中的swiper组件真的是简单方便 提供了页面中图片文字等滑动的效果 <swiper> <swiper></swiper> <swiper></swiper> <swiper></swiper> </swiper> 这里的就是一个滑块视图...
微信小程序实现轮播图
热门推荐
weixin_48884617的博客
01-19 2万+
实现轮播图之前必须知道以下三点： 一、轮播图外层容器swiper 二、每一个轮播项swiper-item 三、swiper标签存在默认样式 1.width100% 2. height 默认为150px 3 .swiper高度无法实现由内容撑开 默认的150px高度的轮播图如下图: ...
微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image
m0_63622279的博客
07-11 7546
scroll-view组件就是滚动的视窗，使用scroll-view组件时，要想横向滚动或者纵向滚动时，需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是，纵向滚动需要给scroll-view组件限定高度，横向滚动则需要给scroll-view组件添加一个限定的宽度。swiper 和 swiper-item组件是微信小程序提供的用于快速构建轮播图的组件，swiper为轮播图的容器，swiper-item为轮播图的每一项。官网地址【swiper组件】
【微信小程序】组件篇 -- 常用视图容器类组件介绍 -- view、scroll-view和swiper（六）
JMFive的博客
02-23 3934
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第6篇文章;今天开始学习微信小程序的第三天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉。
微信小程序swiper实现一页多个小图
07-14
你可以使用swiper组件来实现一页显示多个小图的效果。首先，在你的小程序页面中添加swiper组件，并设置宽度和高度，以及其他样式属性。然后，在swiper组件内部使用image组件来展示每个小图。 以下是一个示例代码： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值