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

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

一、功能描述

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

二、修改内容

index.wxml修改

<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修改

.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%;

三、效果展示

上一篇:使用Vue3+Echarts实现加载中国地图,点击省份地图下钻(完整教程)


下一篇:前端入门指南:Webpack 的打包流程是怎样的-前言