小程序中使用scroll-view组件,内容高度未超过容器高度时依然可以上下滑动小段距离的问题

news/2024/7/20 2:01:04 标签: 小程序, 前端, scroll-view标签组件

解决办法:

如下代码:检查下scroll-view组件是否设置了上下padding 或者 scroll-view的父盒子()设置了上下padding,如果设置了,去掉就可以解决问题。

<view class="home-page">
    <scroll-view class="scroll-box" scroll-y="{{true}}" style="height: {{scrollBoxHeight}};"
        scroll-with-animation="{{true}}" upper-threshold="{{50}}" lower-threshold="{{50}}"
        bindscrolltoupper="handleScrollToupper" bindscrolltolower="handleScrolltolower" bindscroll="scroll">
        <!-- <view class="test-box" >测试测试测试</view> -->
        <view class="nav-bar-box {{navBarSticky === true ? 'nav-bar-sticky': ''}}">
            <nav-bar bind:switchChannel="switchChannel" activeChannel="{{getMore.channel}}"></nav-bar>
        </view>
        <view tt:if="{{navBarSticky}}" style="height: {{navBarDistance}}"></view>
        <view class="template-list-item">
            <template-list tt:if="{{dataList.length > 0}}" dataList="{{dataList}}" activeChannel="{{getMore.channel}}"></template-list>
        </view>
        <view class="no-data" tt:if="{{hasAllData}}">
            <text>没有更多了</text>
        </view>
    </scroll-view>
</view>

(完)


http://www.niftyadmin.cn/n/699039.html

相关文章

微前端框架MicroApp入门学习笔记(一)

1、简介 微前端是一种架构风格&#xff0c;旨在通过将前端应用程序拆分为更小、更可管理的部分&#xff0c;使多个团队能够独立开发、部署和维护这些部分&#xff0c;从而实现前端的可扩展性和可维护性。   MicroApp框架是京东出品的一种用于构建微前端架构的开源框架&#x…

git常用命令之tag

11. Tag 11.1 创建tag 命令作用轻量标签git tag v1.0基于本地当前分支最新commit创建tag v1.0git tag v.0325 125a1d1给指定commit 125a1d打标签附注标签git tag -a v.0329 -m "给标签添加说明" 125a1d1基于指定commit创建标签并添加说明git tag -a v.0329 -m &quo…

使用JavaScript获取随机数序列

使用Javascript 生成随机数 要在 Javascript 中生成随机数&#xff0c;可以使用 Math 对象的 random() 方法。该方法返回一个大于等于 0 小于 1 的伪随机浮点数。 Javascript中的 Math.random() 函数是一个用于生成随机数的内置函数。 MDN 官方解释 Math.random() 函数返回…

2023亚马逊云科技中国峰会主题演讲,分享基础架构在AI浪潮的求新求变

2023亚马逊云科技中国峰会第二天精彩继续&#xff01;6月28日&#xff0c;亚马逊云科技大中华区产品总经理陈晓建在《专注创新&#xff0c;摆脱基础架构束缚》主题演讲中提出&#xff0c;云服务是支持数字创新的关键生产力。在当前生成式AI技术爆发的大环境下&#xff0c;亚马逊…

使用C#BinaryReader类

BinaryReader有两种流 第一种&#xff1a;文件流&#xff08;File Stream&#xff09; 顾名思义&#xff0c;存储在文件中的&#xff0c;文件流用于读写文件&#xff0c;它将数据读取或写入到磁盘上的文件中。你可以使用 File.Open 方法创建文件流&#xff0c;指定文件的路径…

[Json]控制返回数据是否包含某个属性

控制返回数据是否包含某个属性 在我们返回给前端的Json格式的数据时&#xff0c;通常我们会定义一个类&#xff0c;里面定义几个成员变量用来定义返回给前端的具体内容&#xff0c;例如&#xff1a; package cn.tedu.csmall.commons.web;import io.swagger.annotations.ApiMo…

基于Java鲸落文化线上体验馆系统设计实现(源码+lw+部署文档+讲解等)

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

应用debezium将postgresql数据送至kafka(官网示例 本地docker部署)

版本 conncet 2.2 postgresql 15.2 1 postgresql 1.1 获取 docker pull debezium/example-postgres1.2 运行 docker run -d --name postgres -p 5432:5432 -e POSTGRES_PASSWORDpostgres debezium/example-postgres1.3 特殊配置 观察镜像中/var/lib/postgresql/data下pos…