小程序 scroll-view 横向滚动 上下不对其 css bug

最新推荐文章于 2024-12-18 05:14:28 发布
原创 最新推荐文章于 2024-12-18 05:14:28 发布 · 460 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在使用scroll-view进行横向滚动时，遇到元素排列错位的问题。解决方法是给子元素添加`vertical-align: top;`。父元素需设置宽度，并添加`overflow: hidden;`和`white-space: nowrap;`，子元素应用`display: inline-block;`。这个CSS hack能有效调整元素对齐，避免滚动时的布局混乱。
部署运行你感兴趣的模型镜像

.scroll-view横向滚动的时候，包含文字图片等，元素错位，两个元素横向不对其

hack：给子元素添加
vertical-align:top;

当使用scroll-view横向滚动时要注意几点：
父元素设置宽度，父元素添加:
overflow: hidden;
white-space: nowrap;
子元素添加属性
display: inline-block;
vertical-align:top;

搞不懂这个cssbug什么原因,

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

CJamenc
关注
详细的介绍微信小程序视图容器组件view、scroll-view与swiper与swiper-item，理解flex布局与主轴的对齐方式justify-content属性
weixin_56296642的博客
06-28 1322
详细的介绍微信小程序视图容器组件view、scroll-view、swiper与swiper-item,理解flex布局与主轴的对齐方式justify-content属性
[uniapp] scroll-view 简单实现 u-tabbar效果
iOSTianNan的博客
08-25 1295
动画开启才有用, 这个好像官网没讲, 也是百度才知道的…实际上,还需要再 v-for的子item上添加。那就在item外层再套个view, 给他设置。属性尝试过,方案较难实现。那有人要说, 我要用。
uni-app 使用scroll-view实现左右滑动会出现上下错乱解决办法
青衫折扇的博客
12-09 2175
<!-- 左右滑动列表 --> <scroll-view scroll-x="true" class="scroll-view" show-scrollbar="false"> <view class="item" v-for="(item,index) in list" :key="index"> <image class="item-image unify-radius" :src="item.main_pic || errorImage" .
Unity学习笔记——ScrollView常用技巧
m0_52058484的博客
05-28 5770
Unity之ScrollView使用
scroll-view横向滚动的时候，元素没有对齐
huihui_jiang的博客
03-05 1945
.scroll-view横向滚动的时候，包含文字图片等，元素错位，第二个元素掉下去； hack：给子元素添加 vertical-align:top; 当使用scroll-view横向滚动时要注意几点： 父元素设置宽度，加上这两个样式overflow: hidden; white-space: nowrap;自元素设置成display: inline-block;vertical-align...
ScrollView嵌套ListView，显示不全和位置不是顶部的解决办法
会飞的鱼儿的博客
01-28 7115
1、前言 当你看到这篇文章的时候，其实你就已经错了，因为ScrollView 中嵌套 List 或 RecyclerView 的做法官方明确禁止。除了开发过程中遇到的各种视觉和交互问题，这种做法对性能也有较大损耗。ListView 等 UI 组件自身有垂直滚动功能，也没有必要在嵌套一层 ScrollView。目前为了较好的 UI 体验，更贴近 Material Design 的设计，推荐使用 N...
uniapp scroll-view 不生效排查
qq_38074398的博客
12-18 1386
【代码】uniapp scroll-view 不生效排查。
uniapp踩坑细节
baidu_41601048的博客
03-26 1053
解决办法（1）给scroll-view设置如下css样式 （2）给scroll-view设置enhance属性和:show-scrollbar="false" 2 uniapp中定义全局变量需要在根目录的uni.scss文件中定义，通过main.js中引入自定义的scss文件不会编译生效 ps: scss文件中定义自定义函数如果带单位的话，需要做如下修改：
<!-- 文章列表 --> <scroll-view class="article-list"> <view class="article-item" wx:for="{{articles}}" wx:key="id"> <view class="article-content"> <text class="article-title">{{item.policyTitle}}</text> <view class="article-meta"> <text class="article-date">{{item.createTime}}</text> <text class="article-views">113阅读</text> </view> </view> <image class="article-image" src="{{item.policyPicture}}" mode="aspectFill"></image> </view> <!-- 新增加载状态提示 --> <view class="loading-box" wx:if="{{!isEnd}}"> <text wx:if="{{isLoading}}">加载中...</text> <text wx:else>上拉加载更多</text> </view> <!-- 新增加载完毕提示 --> <view class="end-box" wx:if="{{isEnd && articles.length > 0}}"> <text>已经到底了~</text> </view> </scroll-view> 为什么不能滚动了
最新发布
03-21
好的，我现在要解决用户关于微信小程序scroll-view组件无法滚动的问题。首先，我需要回忆一下scroll-view的基本用法和常见问题。根据用户提供的引用内容，scroll-view的滚动问题可能涉及多个方面，比如样式设置、...
【小程序项目开发--京东商城】uni-app之自定义搜索组件（上）-- 组件UI
计算机魔术师的blog
06-30 3489
对于搜索图标，uni官方给我们了相应的组件 这些官方组件都放在了文件uni_modules目录下了，直接使用即可 样式 效果：在滑动三级分类时，会发现显示的不完整，且此时搜索框是会可以被滑动，这是因为我们在scroll-view滑动组件中设置的高度是手机可用的高度，而此时搜索框组件占用了一部分高度，对应的，底部也会减少一部分高度，所以我们在设置其滑动组件高度时可以减去搜索框对应使用高度 各个高度如下 成功解决通过自定义属性增强组件的通用性（自定义背景颜色，圆角程度） 在组件中动态绑定style，
解决ScrollView滚动条不在最顶部的问题
StoneHui
10-10 2391
ScrollView中嵌套GridView(已重写)，就是那种按照网上的方法。GridView重写以下方法解决不能完全显示的问题/** 重新方法，使其不会出现滚动条，以解决被嵌套进ScrollView不能正常显示的问题 */ @Override public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int e
小程序scroll-view滚动条点击索引回到对应位置，滚动后点击上次索引不生效
weixin_30614109的博客
07-23 259
小程序scroll-view滚动条点击索引回到对应位置，滚动后点击上次索引不生效。https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 但是点击另一个索引时没问题，所以每次点击时先调到一个未知的id，做个延时，之后再调到期望的id，。源代码如下： （楼主是用京东凹凸实验室的Taro框架写...
解决ScrollView起始位置不是最顶部问题的3套方案
专注于移动互联网
10-21 2416
解决方法： 1. 在代码中获取该ScrollView的对象，然后加入如下代码： scrollview.setFocusableInTouchMode(true); scrollview.requestFocus(); 下面的2和3方法是网上看到的，据说很有用，但是经本人测试均无效，也不能完全否定这两个方法，或许不适合我的代码环境，贴上。 2：如果嵌套了Li...
微信小程序之scroll-view
热门推荐
Hedong的博客
01-23 1万+
scroll-view 可滚动视图区域。 使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。 实例代码如下：<view class="section"> <view class="section__title">垂直滑动</view> <scroll-view scroll-y="true" bindscrolltolower="lower" bindscrol
Scrollview嵌套listview显示出来的位置不在顶部而是中间的问题解决方法
shenggaofei的博客
04-10 1538
1.在项目中Scrollview里面嵌套了一个listview应该会经常用到 ，有的ListView是自定义的，通过设置一个方法设置了listview的高度，显示的情况是进到这个界面的时候看到的不是最上面，而是显示在中间，用户体验很不好，因为进入的界面时需要看到默认的最上面的布局，解决方法只需要两行代码：mScrollView_makeRecript.smoothScrollTo(0,20);然后...
微信小程序(uniApp)：scroll-view横向滚动实现点击元素滚动到页面中间的效果
qq_32654773的博客
11-23 4226
wxml: <scroll-view class="scroll" scroll-x='true' scroll-with-animation :scroll-left='scrollLeft'> <view v-for="(item, index) in tabsList" :key='item.id' :class="[{active: currentIn...
[Unity][UGUI]Scroll View左下角对齐从下至上排列的问题解决办法
BuladeMian的博客，菜得抠脚，菜得真实
08-18 4141
Scroll View左下角对齐从下至上排列 设置如图所示，但是Scroll View 的Content 的 组件Rect Transform的 Pivot 没有设置 为 X：0 Y：0。即锚点在左下角。 那么Scroll View的排列方式 还是 从上 至下。 Content -Rect Transform组件 Pivot: X:0 Y:0(锚点 为...
小程序 scroll-view 横向滚动 错位
weixin_40872164的博客
07-10 2184
自己遇到的问题：1. scroll-view横向无法滚动解决方法：scroll-view 添加样式：style="white-space: nowrap; width:100%;"子元素添加样式：display：inline-block；2. 在使用scroll-view横向滚动时，里面的每一个子元素中是有文字，字数不定。写完样式，在开发工具显示正常，但是在手机上测试时子元素错位。给子元素添加样式...
小程序scroll-view 水平滚动的不滚的问题
immocha的博客
12-31 381
官方文档： https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 官方这个例子里，垂直方向是OK的，水平我是滚不动的。直接套用到我自己的小程序里，也依然是滚不动的。事实证明缺少必要的CSS。 wxml <scroll-view class="video-list" scroll-x="true"...
微信小程序scroll-view横向滚动是右边出现留白
11-27
微信小程序里的`scroll-view`组件如果设置为横向滚动并且内容超过容器宽度，可能会在右侧出现留白，这是因为小程序的`scroll-view`默认是单轴滚动的，即只支持水平或垂直方向的滚动。为了消除这种留白，你可以尝试...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值