微信小程序scroll-view底部内容无法完全显示

最新推荐文章于 2024-05-31 14:20:04 发布
最新推荐文章于 2024-05-31 14:20:04 发布
阅读量3.7k 收藏 4
点赞数 1
分类专栏： 小程序 html 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cc6_66/article/details/117808608
版权

微信小程序scroll-view底部内容无法完全显示

真机调试时，滑动到最底部，松手无法显示最底部的内容，如图：

在这里插入图片描述

需要在scroll-view组件内的最后加一个空白组件view在占位，使最后的信息能够完全显示出来

<view class="scrollSpase"></view>
呆子小木心
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
微信小程序scroll-view无法准确滚动到页面最底部
TrZoey的博客
04-12 1万+
最近在做一个模拟微信聊天页面的小程序，在使用&lt;scroll-view&gt;组件的scroll-into-view属性使页面自动滚动到页面最底部的时候，发现经常出现滚了一半又滚回去了。后来发现是因为我发出一条消息之后服务器会立刻返回一条消息，短时间内改变了 scroll-into-view 的值两次，而微信所有的方法都是异步的，有可能左侧的消息比较长，向下滚动了一半的时候右侧出发了滚动事件，...
微信小程序：scroll-view
Continue的博客
05-30 2728
文章目录1. 概述2. 基本使用遇到问题 写在前面 最近在用小程序时多次踩坑scroll-view，决定记录下 1. 概述 scroll-view是微信小程序里的一个视图容器，使用它我们可以实现滑动效果，通过设置scroll-x scroll-y可以实现横向滑动或竖向滑动，但是这其中也有些需要注意的问题。 2. 基本使用 <scroll-view class="historyScrollView" scroll-x enable-flex> <view class="sr
关于小程序scroll-view组件更新时底部显示
weixin_42123532的博客
10-17 1845
在小程序开发中，需求是scroll-view组件在出现滚动条时，默认显示最底部内容。做这个我们需要用到scroll-view组件的scroll-top属性， 在开发遇到的坑。 坑：绑定scroll-view的scroll-top属性，在每次监听到事件或者websocket回调时设置其值，当大于scroll-view的列表高度的时候就会显示到最底部了。但是会出现内容被顶上去，下边出现空白区域。 ro...
微信小程序-wx.showToast超长文字展示不全
最新发布
c1o2c3o4的博客
05-31 1100
根据官方文档，icon=none，最多显示两行文字。所以如果提示信息较多，超过两行，就需要用其他方式解决。1、要在xml里面添加，否则就会报错找不到节点。2、要在ts或者js引入，否则就无法使用。3、在ts或者js页面先引入再使用。1、在需要使用的json页面引入。2、在xml页面添加。
微信小程序踩坑之scroll-view
weixin_44667590的博客
06-19 545
scroll-view与fixed同时使用的问题
微信小程序自定义tabbar遮挡scroll-view问题
qq_51226378的博客
09-23 1379
转换完成之后，设置scroll-view高度，将屏幕高度减去距离顶部的高度，再减去导航栏高度即可。2.我的导航栏高度单位为rpx，那就需要将页面所有控件改为rpx，同时将获取的屏幕高度转为rpx。3.单位为px的，获取完高度后直接减。1.获取用户手机宽度和高度。
小程序scroll-view+position: fixed定位底部时内容不显示问题
chaosama的博客
03-20 3201
在开发者工具是没问题，但是在真机上会有这么一个问题： 当页面内容无法到达底部的时候，就会出现被position: fixed的view无法显示的问题 解决办法就是给scroll-view上高度，height: 100vh; ...
微信小程序scroll-view横向滚动显示不全，及子元素纵向排列问题
weixin_42826294的博客
06-25 3813
一句话，scroll-view的子元素要inline-block，父元素white-space: nowrap;就可以横向排列。但是这个时候，子元素有最后一个元素有可能是显示不全的，需要在scroll-view加上overflow: scroll;。就可以完美解决问题，直接上代码吧。本人亲自踩此坑，如有帮助，请点赞哦，好用不点赞就是耍流氓，哈哈，白嫖。 <view class="title-con"> <view class="conclude-title">
【微信小程序】解决 竖向＜scroll-view＞组件 “竖向滚动页面出现遮挡”问题
10年职场两茫茫，35岁凄凉奈若何
02-17 502
【微信小程序】解决 竖向<scroll-view>组件 “竖向滚动页面出现遮挡”问题
微信小程序中scroll-view中不设定高度实现自动滚动
09-17
在微信小程序中scroll-view沿y轴进行滚动时需要设定固定高度，现通过样式和布局实现高度自适应不设定高度
精确计算微信小程序scrollview高度，全机型适配
03-29
众所周知，可以滑动的 scroll 组件在移动端非常的重要，几乎每个页面都要用到。 而小程序的 scroll-view 组件就比较坑了，非得指定一个高度才能正常使用。布局复杂的时候谁还给你算高度啊。。。 坑归坑，没办法，还是得用……既然官方要求必须传高度，那就想办法计算吧。 一、布局分析，推导公式 先给个示例图： (此图片来源于网络，如有侵权，请联系删除! ) 这是一个稍微复杂点的页面，最上面是两个 tab 标签，每个标签的页面是一个子组件。第二个子组件布局是上面一个标题，下面是 scroll-view 。 再画个解剖图吧…… (此图片来源于网络，如有侵权，请联系删除! ) 页面分三部分，ta
微信小程序 scroll-view滚动到底部事件不触犯的锅
03-29
今日准备把微信小程序的下拉刷新做一下，没想到我绑定了bindscrolltolower事件，但是居然不触发,我设置了lower-threshold高度无济于事.最后经过不懈的努力，找了很多资料，才发现,居然要设置scroll-view高度，于是我...
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
08-31
在微信小程序中，`scroll-view` 是一个非常重要的组件，用于实现可滚动的内容区域，它支持垂直和水平滚动。在本实例中，我们将探讨如何利用 `scroll-view` 实现上拉加载更多数据（无限滚动）和下拉刷新数据的功能。 ...
微信小程序scroll-view+swiper切换内容
05-06
在“微信小程序scroll-view+swiper切换内容”这个场景下，描述中提到的“多个swiper-item同时显示”意味着可能是在一个 `scroll-view` 内部嵌套了多个 `swiper`，每个 `swiper` 包含多个 `swiper-item`。这样的设计...
微信小程序scroll-view仿拼多多横向滑动滚动条
10-18
主要为大家详细介绍了微信小程序scroll-view仿拼多多横向滑动滚动条，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序 - 解决弹框遮罩层的滚动穿透问题
qinnzheng
09-16 5068
小程序穿透
微信小程序实现自定义底部导航
Dilemma_me的博客
11-26 1676
建一个tabbar.wxml组件 <template name="tabBar"> <view class="tab-bar" style="color: {{tabBar.color}}; background: {{tabBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}};"...
微信小程序scroll-view scroll-into-view
10-13
微信小程序中的 scroll-view 组件可以实现滚动视图的效果，而 scroll-into-view 属性可以让指定的某个子组件滚动到视图中。当 scroll-into-view 的值为某个子组件的 id 时，该子组件就会滚动到 scroll-view 的顶部或底部，具体取决于该子组件在 scroll-view 中的位置。 例如，以下代码可以让 id 为 "item-5" 的子组件滚动到 scroll-view 的顶部： ``` <scroll-view scroll-into-view="item-5"> <view id="item-1">...</view> <view id="item-2">...</view> <view id="item-3">...</view> <view id="item-4">...</view> <view id="item-5">...</view> <view id="item-6">...</view> <view id="item-7">...</view> </scroll-view> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值