微信小程序使用scroll-view 加上enable-flex之后高度变得特别长

于 2024-09-29 10:18:53 发布
阅读量54 收藏
点赞数 1
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33769914/article/details/142629262
版权

横向滚动给scroll-view标签加上了display:flex的样式后高度变得很长。

可以在设置align-items: flex-start;可解决这个问题。

或者给scroll-view下的标签加上height: fit-content;

肖肖肖丽珠
关注
详解微信小程序之scroll-view的flex布局问题
s13166803785的博客
01-18 506
关于微信小程序的scroll-view组件，第一次写的时候是直接在scroll-view中用了一层容器包裹子元素，然后用了flex布局，并且是用了组件来实现的横向滚动，后面有提出改进，但是不记录下，就发现过了几天，就有点懵了。这篇文章主要介绍了详解微信小程序之scroll-view的flex布局问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧。-- 要想使用flex布局实现横向滚动，就要在scroll-view里加一层容器包裹，并且使用子组件才会出现滚动效果 -->
微信小程序scroll-view避坑指南
weixin_45438997的博客
11-15 1472
如果我们要在微信小程序中实现横向滑动展示内容的场景，scroll-view是我们的首选，但是在使用中可能会遇到一些问题，我们结合实际案例记录一下注意点。 以横向滚动隐藏滚动条为例，我们需要给元素设置如下属性： <!-- 元素不使用flex布局--> <scroll-view scroll-x="true" enhanced="true" show-scrollbar="false"> <!-- 元素使用flex布局--> <scroll-view scroll-
微信小程序开发 scroll-view enable-flex失效的解决方法
ricoshallow的博客
06-21 2619
方法1： 在外盒子<scroll-view>使用white-space: nowrap来禁止子盒子换行，需要将子盒子设置为行内块级元素display: inline-block，这个方法无法设置子盒子之间的间距 margin属性会失效 页面结构（.wxml） <!-- 内容区 --> <scroll-view class="recommendScroll" scroll-x> <view class="scollItem">
微信小程序scroll-view组件设置display:flex不生效解决办法
to_prototy的博客
08-29 1555
微信小程序scroll-view组件设置display:flex不生效解决办法
微信小程序之scroll-view的flex布局问题
SUperstarkd的博客
11-22 593
微信小程序中 可滚动视图区域 scroll-view在使用时 直接在scroll-view标签上设置样式时: display: flex; flex-wrap: wrap; 元素会在一列显示 解决办法 在scroll-view 标签上加上 enable-flex
微信小程序-scroll-view
qq_58706693的博客
03-01 524
scroll-view不能上滑问题
微信小程序scroll-view组件[使用竖向横向滚动，flex布局不起效问题，滚动到下个元素及其滚动动画]
weixin_49931650的博客
02-13 1390
scroll-y属性：使用竖向滚动，必须给scroll-view一个固定高度 scroll-x属性：使用横向滚动，必须加以下样式 enable-flex 启用 flexbox 布局。 scroll-into-view滚动到该元素、scroll-with-animation滚动时的动画
微信小程序scroll-view组件启用enable-type属性后flex布局也不生效的解决办法
qq_45735316的博客
09-16 372
微信小程序scroll-view组件启用enable-type属性后flex布局也不生效的解决办法 原因：组件版本库过低，不支持该属性 解决办法： 1.升级微信开发者工具（亲测有效） 在微信开发者工具->版本更新 2.设置版本库（未实践过不知道效果） 设置->项目设置->本地设置 ...
微信小程序-scroll-view 中 flex 布局失效
小傲哥哥的博客
03-30 1304
scroll-view 中 flex 布局失效 今天做微信小程序项目的时候，想把商品横着展示 滑动，使用flex布局的时候，怎么也不起作用。 百度琢磨了半天，终于找到解决方法了 在 scroll-view 中加入 enable-flex = true 即可 <scroll-view scroll-y="true" enable-flex="true"> code... </scroll-view> ...
微信小程序 scroll-view的使用案例代码详解
10-15
【微信小程序 `scroll-view` 的使用详解】 在微信小程序开发中，`scroll-view` 是一个非常重要的组件，它提供了一个可滚动的视图容器，能够处理复杂的滚动需求，包括横向和纵向滚动。本文将深入探讨 `scroll-view` ...
微信小程序：scroll-view
Continue的博客
05-30 2799
文章目录1. 概述2. 基本使用遇到问题 写在前面 最近在用小程序时多次踩坑scroll-view，决定记录下 1. 概述 scroll-view是微信小程序里的一个视图容器，使用它我们可以实现滑动效果，通过设置scroll-x scroll-y可以实现横向滑动或竖向滑动，但是这其中也有些需要注意的问题。 2. 基本使用 <scroll-view class="historyScrollView" scroll-x enable-flex> <view class="sr
基于微信小程序的美食外卖管理系统
计算机学姐的博客
09-22 1728
基于微信小程序+Java+SpringBoot+Vue+MySQL的美食外卖管理系统的设计与实现
实现微信小程序中点击单词显示在input的交互功能指南
不迁怒，不贰过。小知识，大智慧。
09-25 753
在微信小程序开发中，有时我们需要实现在前端显示文章并实现一些交互功能。本文将介绍如何在微信小程序前端显示英文文章，并在点击单词时将其取出并显示在input中。通过本文的指导，您将学会如何处理点击事件、提取单词以及更新页面数据。
uni-app+vue3微信小程序怎么获取 this.getTabBar()
肖肖肖丽珠的博客
09-25 378
/ 获取当前页面实例。selected: 0 // selected根据tabbar数组里面的索引值来写的。
计算机毕业设计之：宠物互助平台的微信小程序系统（源码+文档+讲解）
程序员阿龙的博客
09-24 1469
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
基于微信小程序的宿舍报修系统的设计与实现(lw+演示+源码+运行）
最新发布
程序员入门进阶
09-27 1150
刚开始学习Java语言的时候，是不知道还有Tomcat这些东西的，各种语法各种输出在控制台进行输出结果，当Java网站开发的时候就不可避免的学习到了Tomcat服务器。Tomcat准确的来讲不算是服务器，可以说是微信小程序引擎或者一个容器，这些都是学术上或者原理上都比较贴切的，但是实际工作中Tomcat就是作为一个web服务器来用的，因为可以实现网站的发布和运行。
微信小程序-使用vant组件库
xiangxiongfly
09-25 852
Vant Weapp 是有赞前端团队开源的小程序 UI 组件库，基于微信小程序的自定义组件开发，可用来快速搭建小程序项目。
基于微信小程序的商品展示+ssm(lw+演示+源码+运行）
程序员入门进阶
09-23 1895
目 录商品展示系统I摘 要IAbstract21 系统概述41.1 概述41.2课题意义41.3 主要内容42 系统开发环境52.1微信开发者工具52.2小程序框架以及目录结构介绍52.3 JAVA简介52.4 MySQL数据库62.5 SSM三大框架73 需求分析13.1 系统设计目标13.2需求分析概述13.3 系统可行性分析23.4经济可行性33.5操作可行性： 33.6系统流程和逻辑34系统概要设计74.1 概述74.2 系统结构7。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值