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

最新推荐文章于 2024-04-05 18:51:11 发布
原创 最新推荐文章于 2024-04-05 18:51:11 发布 · 3.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #vue.js

在真机调试微信小程序时，发现scroll-view组件存在一个问题：内容无法在松手后完全显示。通过测试，解决方案是在scroll-view的最后添加一个空白view组件作为占位，以确保底部信息能完整呈现。此方法成功解决了底部内容不全的显示问题。

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

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

最底下的内容无法显示出来

亲测！！！
需要在scroll-view组件内的最后加一个空白组件view在占位，使最后的信息能够完全显示出来
在这里插入图片描述
效果：
底部信息已经完全显示出来
在这里插入图片描述

微信小程序scroll-view不能横行显示的问题，以及隐藏scroll-view滚动条
执笔编写人生
01-08 2666
最近因为项目需要，不定期的总结点东西，还有开发遇到的各种坑和大家分享下吧。 我想在页面顶部展示种类的tab，从后台动态获取并显示出来，自己也了解一些微信的小组件，就感觉scroll-view挺适合，然后就去官网API文档找找。微信官方给的 scroll-view 组件说明，只说了  “使用竖向滚动时，需要给<scroll-view>一个固定高度，通过 WXSS 设置 height。”...
微信小程序：scroll-view
Continue的博客
05-30 2955
文章目录1. 概述2. 基本使用遇到问题 写在前面 最近在用小程序时多次踩坑scroll-view，决定记录下 1. 概述 scroll-view是微信小程序里的一个视图容器，使用它我们可以实现滑动效果，通过设置scroll-x scroll-y可以实现横向滑动或竖向滑动，但是这其中也有些需要注意的问题。 2. 基本使用 <scroll-view class="historyScrollView" scroll-x enable-flex> <view class="sr
ios UIScorollView滑不到底，底部被遮住，不能滚到最下方
xisan_10的博客
03-17 3356
ios UIScorollView滑不到底，底部被遮住，不能滚到最下方。
微信小程序 scroll-view滚动到底部事件不触犯的锅
03-29
今日准备把微信小程序的下拉刷新做一下，没想到我绑定了bindscrolltolower事件，但是居然不触发,我设置了lower-threshold高度无济于事.最后经过不懈的努力，找了很多资料，才发现,居然要设置scroll-view高度，于是我...
微信小程序scroll-view仿拼多多横向滑动滚动条
10-18
通过本知识点的介绍，大家可以了解到微信小程序scroll-view组件在实现仿拼多多横向滑动滚动条时的关键属性和方法，并能够根据实际的开发需求进行相应的代码实现。希望本文能够对正在开发微信小程序的朋友们提供有...
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
08-31
在微信小程序中，`scroll-view` 是一个非常重要的组件，用于实现可滚动的内容区域，它支持垂直和水平滚动。在本实例中，我们将探讨如何利用 `scroll-view` 实现上拉加载更多数据（无限滚动）和下拉刷新数据的功能。 ...
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
10-17
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，它允许开发者创建可滚动的内容区域，以处理超出屏幕范围的内容。本实例主要讲解如何利用 `scroll-view` 实现自动滑动到底部的功能，这对于聊天界面、评论...
scroll-view竖屏一直显示不全，边距不显示
m0_62170162的博客
01-25 1092
先看看整体样式，是不是被最大的外层容器覆盖了，不是scroll-view的锅。
微信小程序开发错误——底部导航栏没有显示完全
江天飞鸟的博客
06-05 1136
微信小程序开发错误——底部导航栏没有显示完全 原因：由于在app.json中设置跳转页面时，假设有A、B、C、D四个图标（点击可以跳转），B和C的跳转页面相同，C的图标就会覆盖B的图标，B的图标就相当于消失了，于是就只有三个图标显示 ...
微信小程序scroll-view横向滚动显示不全，及子元素纵向排列问题
weixin_42826294的博客
06-25 4460
一句话，scroll-view的子元素要inline-block，父元素white-space: nowrap;就可以横向排列。但是这个时候，子元素有最后一个元素有可能是显示不全的，需要在scroll-view加上overflow: scroll;。就可以完美解决问题，直接上代码吧。本人亲自踩此坑，如有帮助，请点赞哦，好用不点赞就是耍流氓，哈哈，白嫖。 <view class="title-con"> <view class="conclude-title">
关于小程序 scroll-view 左右横向滑动没有效果（无法滑动）问题
weixin_30528371的博客
09-28 979
小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分，在这次项目中刚好需要用到横向滑动，但在测试过程中发现横向滑动没有了效果（静止在那里没移动过），经调试发现： 1.scroll-view 中的需要滑动的元素不可以用 float 浮动； 2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的； 3.scroll-view ...
微信小程序border显示不全可能出现的问题
月落星河
11-24 2826
禅道bug记录 写了按钮发现下面的border线不显示，以为是被什么元素压住了， 最后发现我是在小程序中用的1rpx为单位，改完2rpx 就好了，但是我后来的测试的时候就再也没有复现过，先记录下。 ...
关于小程序scroll-view组件更新时底部显示
weixin_42123532的博客
10-17 2100
在小程序开发中，需求是scroll-view组件在出现滚动条时，默认显示最底部内容。做这个我们需要用到scroll-view组件的scroll-top属性， 在开发遇到的坑。 坑：绑定scroll-view的scroll-top属性，在每次监听到事件或者websocket回调时设置其值，当大于scroll-view的列表高度的时候就会显示到最底部了。但是会出现内容被顶上去，下边出现空白区域。 ro...
微信小程序开发中，wxss和wxml写完后页面不显示，可能的原因包括：
最新发布
IT_linux的博客
04-05 3258
4.数据量大或页面元素多：如果数据量很大或页面标签特别多，可能会导致页面加载缓慢或预览困难。1.代码错误：有时候代码中存在错误，但编译器不会报错，导致页面不显示。3.JS文件为空：确保当前wxml文件对应的js文件不为空，即使没有具体的处理逻辑，也不能没有js代码2。6.重启小程序：如果上述方法都无法解决问题，尝试重启小程序看是否能正常显示1。7.通过以上方法，一般可以定位并解决微信小程序开发中页面不显示的问题。5.缓存问题：有时候，清空缓存后重新编译可以解决页面不显示的问题1。
微信小程序自定义tabbar遮挡scroll-view问题
qq_51226378的博客
09-23 2805
转换完成之后，设置scroll-view高度，将屏幕高度减去距离顶部的高度，再减去导航栏高度即可。2.我的导航栏高度单位为rpx，那就需要将页面所有控件改为rpx，同时将获取的屏幕高度转为rpx。3.单位为px的，获取完高度后直接减。1.获取用户手机宽度和高度。
微信小程序scroll-view内容未充满触发滚动条结束方案
qq_36126031的博客
03-04 843
一、问题描述 微信小程序scroll-view标签下内容并未充满整个屏幕，但是右侧却出现了滚动条 二、原因 scroll-view下第一个view标签使用 margin 导致了垂直方向的内容塌陷 三、解决方案 通过百度在微信小程序社区看到一个方案 <view style="content: ''; overflow: hidden;"></view> 四、总结 小吐槽一下：感觉微信小程序的开发总是那么的莫名其妙 ...
微信小程序swiper扩展左右滑动两边各显示一半
牛哞哞杂记
09-01 2802
实现如下的功能： 代码： index.wxml <swiper class='swiper' next-margin='120rpx' bindchange='swiper'> <block wx:for="{{devices}}" wx:key="" wx:for-item="device"> <swiper-item item-id="{{devic...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值