微信小程序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%;

三、效果展示

相关推荐
奶糖 肥晨2 小时前
微信小程序隐藏滚动条多种方法教程
微信小程序·小程序·notepad++
计算机学姐2 小时前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
sen_shan2 小时前
《微信小程序》第三章:Request封装
微信小程序·小程序
sen_shan2 小时前
《微信小程序》第一章:开发前准备与配置
微信小程序·小程序
游戏开发爱好者83 小时前
HTTPS 内容抓取实战 能抓到什么、怎么抓、不可解密时如何定位(面向开发与 iOS 真机排查)
android·网络协议·ios·小程序·https·uni-app·iphone
stark张宇7 小时前
超越 Hello World:深入小程序 Hybrid 初衷、安全配置与上线全链路
nginx·微信小程序·php
菜鸟una9 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
2501_9151063212 小时前
iOS 混淆与 IPA 加固全流程,多工具组合实现无源码混淆、源码防护与可审计流水线(iOS 混淆|IPA 加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者812 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆 Ipa Guard)
android·ios·小程序·https·uni-app·iphone·webview
lypzcgf13 小时前
商城小程序数据库表结构文档
数据库·小程序·电商