小程序中元素变大，出现滚动问题解决方案

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

在做小程序的时候，有时会出现元素高度变大，出现滚动条

 

解决方案：

在当前页面wxss文件中添加

view {
  overflow: visible;
  line-height: normal;
}

后续添加原理

微信小程序开发系列（十二）·屏幕滚动scroll-view 组件的使用
时光の尘的博客
03-02 2万+
网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容。scroll-view:可滚动视图区域,适用于需要滚动展示内容的场景,用于在小程序中实现类似于。在微信想小程序中如果想实现内容滚动，需要使用 scroll-view 组件。① scroll-x： 允许横向滚动。② scroll-y： 允许纵向滚动。框住部分能够上下滚动。
小程序scroll-view滚动时会有滚动条
weixin_42317515的博客
03-15 1504
在安卓手机上，scroll-view滚动时会有滚动条出现 解决方法： 给scroll-view加上样式 ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
小程序中控件里面的内容较多，让其支持滚动的方法
weixin_64103049的博客
03-08 933
小程序中控件里面的内容较多，让其支持滚动的方法
解决出现滚动条造成布局改变
小朱的专栏
03-22 3295
html { width:100vw; overflow-x:hidden; }
小程序中控件里面的内容较多，让其支持滚动的良好方案
英勇的博客
06-25 956
对于写过安卓原生的人来说，可能会按照思维定式，在小程序里直接使用scroll-view去实现滚动。这其实一个糟糕的想法，因为微信小程序文档里面已经写有了，使用竖向滚动时，需要给scroll-view指定一个固定的高度，如下图： 我也是醉了，当列表的内容比较少的时候，指定固定高度，那肯定会留下很多剩余空间，你说丑不丑？例如下图，灰色区域是滚动区域，列表只有两个项目： 我想要做的效果是，让滚动区域刚好包裹住里面的内容，只有高到一定程度了，才出现滚动效果。我尝试过给scroll-view标签加上height:f
关于 Taro 的 ScrollView 在Dom结构发生变化会自动回滚到顶部解决方案和原因
qq_33490514的博客
12-30 4973
使用Taro开发小程序时候发现 ScrollView 会在同级节点发生增删情况下会自动会滚ScrollView到顶部，经过多次验证和查阅Taro原理发现这是Taro自身bug 出现BUG原因 因为Taro其实是将React所有组件的state更新归级Page统一进行管理即楼级组件对应的state是 state = { cn: [ cn1, cn2, cn3 ] } 那么新增和删除节点就是 this.setState({ cn: [ cn1, cn3 ] }) 这样就会导致组件数组对比是完全更新的，.
解决微信小程序中的滚动穿透问题
12-13
总之，解决微信小程序中的滚动穿透问题，关键在于阻止不必要的滚动事件，并根据实际场景灵活调整元素的定位和滚动行为。通过这种方式，可以显著提升用户体验，避免内容在不应滚动时产生滚动现象。对于遇到此类问题的...
解决微信小程序scroll-view组件无横向滚动的问题
10-15
总之，解决微信小程序`scroll-view`组件无横向滚动的问题，关键在于正确设置父元素的`white-space`属性和子元素的`display`属性。同时，需要注意的是，微信小程序中的样式编写遵循WXML和WXSS的规则，与传统的HTML和...
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
10-17
在微信小程序开发过程中，开发者可能会遇到textarea组件层级过高导致覆盖其他元素的问题。微信小程序的textarea组件作为原生组件，它的层级被设定为最高，这意味着它会位于页面中其他所有组件之上，即便是设置了高z-...
微信小程序实现自上而下字幕滚动
10-18
在微信小程序中实现自上而下的字幕滚动效果，我们可以采用两种不同的方法。这两种方法都是为了达到文字在屏幕内自下而上滚动，并且能够自动循环的效果。 **第一种方法：使用swiper组件** 最初，开发者可能会尝试...
小程序scroll-view安卓机隐藏横向滚动条的实现详解
10-16
在微信小程序中，`scroll-view` 组件是一个用于实现可滚动内容区域的组件，特别适合在有限的空间内展示大量数据。在本问题中，开发者遇到了一个特定于安卓设备的问题，即在使用 `scroll-x` 属性实现横向滚动时，滚动...
编译支付宝小程序 设置页面滚动时 overflow-y: auto不生效
qq_44990124的博客
08-05 1044
设置页面滚动时 不能设置overflow-y: auto;要设置overflow-y: scroll;
uview1 的u-tabs组件在微信小程序中会出现横向滚动条
风花一世月
12-11 1059
uview1 的u-tabs组件在微信小程序中会出现横向滚动条，真机才会生效，微信开发者工具没问题包括官方示例也会 原因：未屏蔽微信小程序的滚动条 解决办法：uview-ui中uview-ui/components/u-tabs/u-tabs.vue文件把h5屏蔽滚动条的条件编译加上|| MP-WEIXIN /* #ifdef H5 || MP-WEIXIN */ // 通过样式穿...
微信小程序scroll-view真机出现滚动条如何隐藏
qq_48104836的博客
11-22 575
微信小程序scroll-view真机出现滚动条如何隐藏
解决小程序和app滚动条的问题--uniapp踩坑
weixin_57844432的博客
08-31 6654
小程序和APP都是用使用scroll-view标签，代码相同，但是效果不同，就觉得很离谱，出现了两类情况，有种两权分立的感觉哈，下面是四种测试情况
微信小程序设置滚动条
weixin_30853329的博客
07-02 1445
前言 又很久没有写东西了，上周开始将一个APP和一个网站的内容整合到微信小程序中，到这会儿终于搞得快结束了，才发现为啥我的小程序滚动视图没有滚动条，这是闹哪样，没有滚动条的滚动是没有灵魂的。 客官可移步http://fanjiajia.cn/2019/07/02/wxxcx/flx1/本文若有出入，请指正——来自小渣渣的颤抖 原因 原来在app.wxss中定义了如下的内容【不知道是不是新建项目...
微信小程序scroll-view显示滚动条
最新发布
LRQQHM的博客
05-11 726
试过网上的直接修改样式的方法不行，自己写一个滚动条定位上去。
微信小程序 SCROLL-VIEW的滚动条设置
細水、長流√的专栏
02-27 6111
小程序的scroll-view用的比较多了，列表页一般也没管它的滚动条，最近突然发现在android与ios中横向滑动的时候表现不一样。上图位置:-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）。上图位置:-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。上图位置:-webkit-scrollbar-corner 边角，即两个滚动条的交汇处。
微信小程序 — css样式学习（实现列表区域滑动）
棒怡情的专栏
12-10 2837
如图我们要实现以下效果。列表在区域内上下滚动，查看数据。由于我们的底部tabbar是自定义的底部view.所以有底部组件的高度。如何实现： 实现思路一： 我们设置整体布局flex, 方向column，设置高度100%， 然后设置滑动部分的布局flex, 方向column,同时设置margin-bottom:(底部自定义tabbar的高度) 整体布局结构如下图： 用到的css样式： page { height: 100%; } .container { height: 10..
微信小程序滚动穿透问题与蒙层防滑解决方案
总结来说，解决微信小程序中的滚动穿透问题需要根据蒙层是否有滚动条来选择不同的策略，通过精确控制滚动行为，确保用户的交互体验。在实际开发中，注意代码的可维护性和性能优化，是保证这种问题得到妥善解决的关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值