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

最新推荐文章于 2024-10-09 09:35:08 发布
最新推荐文章于 2024-10-09 09:35:08 发布
阅读量365 收藏 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的高度

在这里插入图片描述

这里使用calc是需要注意要在/号（其他运算符也是同理）两边添加空格，不然不生效！！！！

结果：

1.使用之前

在这里插入图片描述

最低0.47元/天 解锁文章
2401_84091468
关注
专栏目录
微信小程序使用swiper组件实现层叠轮播图
10-17
本文主要介绍如何在微信小程序中使用swiper组件来实现层叠轮播图效果，这可以有效吸引用户的注意力，并提升用户体验。 首先，我们需要了解Swiper组件的基本概念。Swiper是一个强大的、灵活的滑动视图容器，通常用于...
微信小程序实现轮播图
baorant24的博客
04-13 8929
微信小程序实现轮播图 问题背景 客户端开发和学习过程中，轮播图是一个很常见的功能，本文将介绍如何在微信小程序中实现轮播图。 问题分析 前一篇文章(参考 https://blog.51cto.com/baorant24/6188322 )，我们实现无限滚动的获奖名单使用了swiper组件，事实上，这个组件也可以用来实现轮播图...
微信小程序中实现轮播图效果
热门推荐
LGL
10-24 2万+
文章目录一、swiper视图容器组件二、swiper相关属性三、swiper-item轮播项四、 一、swiper视图容器组件 swiper是轮播图的外层容器，所以使用轮播图就必须使用到swiper标签。 二、swiper相关属性 三、swiper-item轮播项 只能放置在swiper组件中。默认样式：宽度自动设置为100% 四、 ...
【微信小程序_4_小程序view组件和swiper组件】
最新发布
爱吃凉拌辣芒果的博客
10-09 1007
本文介绍小程序组件相关知识。包括组件分类为 9 大类，重点阐述视图容器类组件，如 view 用于页面布局，scroll - view 用于滚动列表，Swiper 和 swiper - item 用于轮播图，并给出相关组件属性及对应 wxml 和 wxss 代码示例。
【微信小程序】swiper的使用
qq_57676486的博客
09-17 3348
1.swiper的基本使用。----scss语法。
微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image
m0_63622279的博客
07-11 8003
scroll-view组件就是滚动的视窗，使用scroll-view组件时，要想横向滚动或者纵向滚动时，需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是，纵向滚动需要给scroll-view组件限定高度，横向滚动则需要给scroll-view组件添加一个限定的宽度。swiper 和 swiper-item组件是微信小程序提供的用于快速构建轮播图的组件，swiper为轮播图的容器，swiper-item为轮播图的每一项。官网地址【swiper组件】
微信小程序 swiper 组件实现层叠轮播图，同时在轮播图中自定义信息
03-24
总结，通过以上步骤，我们成功地利用微信小程序的Swiper组件实现了层叠轮播图，并自定义了指示点样式和图片描述信息。在实际项目中，可以根据需求进一步优化细节，例如添加过渡动画、设置轮播速度等，以提升用户体验...
微信小程序 swiper组件构建轮播图的实例
08-29
为了实现轮播图功能，微信小程序官方提供了swiper组件。接下来我将详细解释如何使用swiper组件来构建轮播图，并提供相关的知识点，包括组件的属性设置、样式定制、参数含义等。 首先，了解swiper组件的基本结构。在...
微信小程序实现的3d轮播图效果示例【基于swiper组件】
01-20
本文实例讲述了微信小程序实现的3d轮播图效果。分享给大家供大家参考，具体如下： 前面写过一篇3d轮播，就是这篇，使用的方法比较笨拙，而且代码不简洁。这次发现swiper也能实现同样的效果。故记录一下。 先看看效果...
微信小程序 swiper组件轮播图详解及实例
09-01
微信小程序中的`swiper`组件是用于创建轮播图的一个核心组件，它可以实现图片或内容的自动切换效果，常用于首页广告展示、产品推荐等场景。在本文中，我们将详细讲解`swiper`组件的使用方法，并通过一个实例来帮助...
微信小程序开发，实现swiper轮播图
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
08-21 2670
否则会导致未定义的行为。
微信小程序轮播图swiper使用
wenshui147258的博客
07-18 3871
微信小程序轮播图swiper使用
微信小程序进阶——Flex弹性布局&轮播图&会议OA项目（首页）
kissship的博客
10-17 2556
Flex 弹性布局是一种用于网页布局的现代 CSS 技术，旨在更灵活地管理容器内的元素排列和分布，以实现响应式设计和更好的页面布局控制。Flex 布局基于弹性盒子模型，通过使用属性，你可以将一个容器转变为一个弹性容器，从而控制其内部子元素的排列方式。
微信小程序-Swiper轮播图的使用
私信可回答各种问题~
04-20 2634
微信小程序-Swiper轮播图的使用
【微信小程序】组件篇 -- 常用视图容器类组件介绍 -- view、scroll-view和swiper（六）
JMFive的博客
02-23 6646
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第6篇文章;今天开始学习微信小程序的第三天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉。
微信小程序-轮播图的实现
暴力扬
10-25 3870
实现如图所示轮播图，具体编写步骤及原代码请见下方。编写 index.wxml。编写index.wxss。编写 index.js。
小程序＜swiper/＞组件详解及使用指南
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
02-04 4073
Swiper组件在微信小程序中扮演着重要的角色，主要用于实现图片轮播、页面滑动等功能，为用户提供了平滑的滑动体验。它是微信小程序提供的一个功能丰富、应用广泛的界面组件，通过它，开发者可以轻松实现多种滑动效果，极大地丰富了小程序的交互性和视觉表现力。
【微信小程序】轮播图——swpier组件
颜颜yan_的博客
11-08 6967
哈喽大家好，本期是微信小程序专栏第六期，本期主要内容是文章列表页面。文章列表页面主体分为轮播图和文章列表两部分。本期主要通过轮播图来学习swipe组件。注意：每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~
微信小程序自定义3D轮播图组件实现
"微信小程序开发中的3D轮播图实现方法" 在微信小程序开发中，创建具有3D视觉效果的轮播图可以提升用户体验。通常，开发者会使用内置的`swiper`组件来实现轮播图功能，但在某些情况下，如本实例所示，`swiper`组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值