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

这篇具有很好参考价值的文章主要介绍了小程序中使用scroll-view组件,内容高度未超过容器高度时依然可以上下滑动小段距离的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

解决办法:

如下代码:检查下scroll-view组件是否设置了上下padding 或者 scroll-view的父盒子< view class=“home-page” >…< /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>

(完)文章来源地址https://www.toymoban.com/news/detail-714878.html

到了这里,关于小程序中使用scroll-view组件,内容高度未超过容器高度时依然可以上下滑动小段距离的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app/微信小程序:scroll-view纵向滚动高度自适应flex布局填充剩余高度

    uni-app文档:https://uniapp.dcloud.net.cn/component/scroll-view.html 使用竖向滚动时,需要给 一个固定高度,通过 css 设置 height 微信文档:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height 所以,给scroll-view设置

    2024年02月09日
    浏览(59)
  • scroll-view自动适应高度,不定高度

    在前端工作开发中,我们常常会遇到如图需求。 实现也很简单内容区域使用scroll-view标签包裹住,内容超出就可以滚动了。 但是!!! scroll-view需要设置一个高度值,它才可以滚动, 如:height: 300rpx。但是这并不友好 高度值 我们是不应该写死 而是让它灵活自适应 我们可以

    2024年02月11日
    浏览(41)
  • 【微信小程序】动态修改page的wxss样式/scroll-view使用/监听子组件

    静态写法 直接使用下面的写法,是静态的。 动态写法 在wxml最外层套一个自己定义的page的class。 如果想修改.page的样式,再用普通的动态class判断改变就可以了。 例如:改变背景颜色 参考:微信小程序如何动态修改page标签的css样式 设置id时需要注意下:id 的设置要求是字母

    2024年02月05日
    浏览(60)
  • 关于uniapp微信小程序scroll-view组件使用show-scrollbar隐藏不了滚动条

    这里关于使用  scroll-view组件  时候有滚动条 想要隐藏滚动条但是使用show-scrollbar没有效果 这时候又使用类名隐藏滚动条 使用id隐藏滚动条都不行 解决方法:在使用  scroll-view组件 的页面或者app 页面加上以下代码就可以了         

    2024年02月12日
    浏览(47)
  • 小程序scroll-view组件纵向滚动返回顶部

    当开发分类页面时,常见的效果如下: 当左侧一级分类被选择之后,右侧的二级分类向下滚动后,再次点击左侧一级分类进行分类切换,二级分类应该立刻恢复到顶部。 首先,界面滚动的效果可以利用小程序中的 scroll-view 组件来实现,例如: 在确定了基本的布局后,就可以

    2024年02月11日
    浏览(64)
  • uniapp开发小程序—scroll-view实现内容滚动时, 标题也滚动

    scroll-view实现内容滚动时, 标题也滚动 完成

    2024年01月19日
    浏览(60)
  • 微信小程序scroll-view组件设置 scroll-top无效问题解决

    微信小程序官方提供了一个可以设置滚动条位置的方法 scroll-top 在实际运用过程中,发现设置了scroll-top无效,滚动条位置并没有发生变化,是因为微信小程序的官方框架处于性能考虑,初始化设置scroll-top不会重新渲染页面,需要将scroll-top的是放在一个事件内执行才可以生效

    2024年02月11日
    浏览(66)
  • 【微信小程序】-- 常用视图容器类组件介绍 -- view、scroll-view和swiper(六)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年01月18日
    浏览(58)
  • [微信小程序] scroll-view组件下拉刷新,怎样结束刷新(已解决)

    官方文档:scroll-view | 微信开放文档 (qq.com) 这里就不赘述scroll-view的基本使用方法了,先看问题:  代码:  由于在官方文档中并没有详细说明如何在刷新完成之后关闭刷新,这里我给出的解决办法就是,给组件绑定一个刷新数据,然后在触发下拉刷新的函数中手动将数据改

    2024年01月20日
    浏览(64)
  • 微信小程序 scroll-view 组件的 bindscroll 不触发不生效

    使用微信小程序基础组件中的scroll-view,但是滑动的时候 bindscroll 一直不生效。 在网上查了资料,发现了几类不生效的原因,总结如下: 1、没有设置高度,根据小程序文档,在使用 scroll-view 组件用于竖向滚动时一定要设置高度。 2、没有设定scroll-y 3、组件属性的长度单位默

    2024年02月11日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包