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

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

一、功能描述

在前一篇文章的隐藏框页面的功能里(《微信小程序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%;

三、效果展示

相关推荐
老李不敲代码8 小时前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa8 小时前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
二J10 小时前
管理100个小程序-很难吗
android·小程序
qq_3573896311 小时前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码,医护小程序
小程序
橘猫云计算机设计1 天前
springboot-基于Web企业短信息发送系统(源码+lw+部署文档+讲解),源码可白嫖!
java·前端·数据库·spring boot·后端·小程序·毕业设计
跨时代科技1 天前
洗车小程序系统前端uniapp 后台thinkphp
小程序
依辰1 天前
小程序SAAS产品定制化需求解决方案
前端·javascript·微信小程序
fakaifa1 天前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
18538162800余。2 天前
NFC 碰一碰实现视频源码,网页与小程序协同
小程序
换日线°2 天前
微信小程序拖拽排序有效果图
微信小程序