微信小程序4-内容溢出滚动条

慕斯白狼2024-12-05 11:52

感谢阅读，初学小白，有错指正。

一、功能描述

在前一篇文章的隐藏框页面的功能里（《微信小程序3-显标记信息和弹框》），我想添加一个内容溢出的时候，可通过滑动滚动条，实现查看溢出部分的内容，走了很多弯路。最大的问题就是在微信小程序编辑器中能够显示正常，但是进入安卓真机实测，就不能用。

二、修改内容

index.wxml修改

html 复制代码

<scroll-view scroll-y="true" show-scrollbar="{{false}}" enhanced="{{true}}" animation="{{animationData}}" class="infobox" wx:if="{{showInfoBoxStatus}}">

 <text>隐藏页面具体展示内容</text>
 <text>隐藏页面具体展示内容</text>
 <text>隐藏页面具体展示内容</text>
 <text>隐藏页面具体展示内容</text>
 <text>隐藏页面具体展示内容</text>
 <text>隐藏页面具体展示内容</text>
 <text>隐藏页面具体展示内容</text>
 <text>隐藏页面具体展示内容</text>
 <text>隐藏页面具体展示内容</text>
 <text>隐藏页面具体展示内容</text>
 <text>隐藏页面具体展示内容</text>
 <text>隐藏页面具体展示内容</text>
 <text>隐藏页面具体展示内容</text>
 <text>隐藏页面具体展示内容</text>
 <text>隐藏页面具体展示内容</text>
 <text>隐藏页面具体展示内容</text>

</scroll-view>

1、容器需要是scroll-view，而不是view。

2、scroll-y="true"用于表示y轴（竖直方向）开启溢出滚动的功能，scroll-y表示x轴（水平方向）

3、show-scrollbar="{{false}}" enhanced="{{true}}"两个加一起表示隐藏滚动条，不想隐藏就可以不用加这两个。

我用了很长时间排查问题，就是因为scroll-y="true"没加，这个非常重要，会导致微信小程序IDE工具预览滚动条正常，但是上实机测试就不能用。最终通过这个参数解决。

index.wxss修改

html 复制代码

.infobox {
  overflow-y: scroll;
  position: fixed;
  height: 40%;
  width: 100%;
  bottom: 0;
  left: 0;
  background: rgba(219, 241, 243, 0.863);
  padding-top: 20rpx;
  position: absolute;
}

其中overflow-y: scroll;height: 40%;必须要有。我一开始height: 40%;

三、效果展示