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

三、效果展示

相关推荐
Nan_Shu_6147 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
尘似鹤8 小时前
微信小程序学习(三)补充
学习·微信小程序
老华带你飞9 小时前
机电公司管理小程序|基于微信小程序的机电公司管理小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·小程序·机电公司管理小程序
涛声依旧10 小时前
基于springBoot鲜花商城小程序
java·spring·微信小程序
卷Java12 小时前
小程序前端功能更新说明
java·前端·spring boot·微信小程序·小程序·uni-app
卷Java12 小时前
小程序原生导航栏返回键实现
spring boot·云原生·微信小程序·uni-app
CTRA王大大12 小时前
【微信公众平台】小程序如何查找菜单?如何通过自定义的菜单路径生成小程序二维码?小程序二维码指定生成
小程序·微信公众平台
说私域12 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的引流爆款设计策略研究
人工智能·小程序
weixin_lynhgworld12 小时前
短剧小程序系统开发:构建便捷高效的影视观看平台
小程序·短剧
知识分享小能手12 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发