关于小程序真机调试主页包含scroll-view，Page的overflow-x失效的问题

最新推荐文章于 2023-11-03 11:20:12 发布
最新推荐文章于 2023-11-03 11:20:12 发布
阅读量2.6k 收藏
点赞数
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37933086/article/details/81032786
版权

大家都知道小程序的模拟器和真机测试还是有点不同的，最近就遇到一个关于主页包含横向scroll-view的问题，在真机调试上，横向滑动scroll-view的同时，发现页面也跟着跑了，查看了控制台的节点样式，发现没有问题，于是就去查了社区还有度娘。说实话，小程序社区的帖子能提供信息的好少，度娘也没什么有用的信息。于是我就自己调下试试。

我这里是通过给内容加了一个view节点，小程序官方也是提到过，所有内容外面最好包一个view的父节点。然后给这个view加了一个width：100%和overflow：hidden。



打开真机调试，就可以了。我认为这里的话是page的overflow-x：hidden在真机调试下有点问题，不过总算是解决了，希望能对大家有帮助！

李哥你别漂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序scroll-view下拉刷新(附带下拉刷新效果)
11-19
在微信小程序开发中，`scroll-view`组件是一个非常重要的元素，它允许用户在内容超过屏幕范围时进行滚动浏览。在本教程中，我们将探讨如何在`scroll-view`中实现下拉刷新（Pull-to-Refresh）功能，同时提供一个具体...
微信小程序scroll-x失效的完美解决方法
12-03
在微信小程序的文档中，使用scroll-view标签，然后给它设置一个scroll-x就可以实现元素，横向排列，可以左右滑动。。。。  然而，在实际开发中，发现并不是这么简单。。。贴上部分wxml和wxss代码…   <!-- ...
小程序overflow:hidden在真机上失效
weixin_45464787的博客
02-23 713
父元素使用border-radius 和 overflow：hidden；子元素使用了transform属性，父元素的overflow：hidden；会失效。 解决方法： 父元素设置以下两个属性： -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); ...
微信小程序scroll-view横向滚动真机测试失败
Sunny_myj的博客
02-05 1856
问题描述： 微信小程序的scroll-view设置横向滚动，在开发工具上显示效果是正常的，但是在真机上测试横向滑动的时候，整个手机屏幕跟着左移 解决： css样式的问题：将scroll-view的样式设置为： white-space: nowrap; display: block;
微信小程序scroll-view真机调试，滑动刷新失效问题
weixin_45981607的博客
04-01 659
1，检查scroll-view的height是否用 “vh” 为单位 2，height 度太高，没有触发事件，适当减小高度
微信小程序overflow-x超出部分样式不渲染
Giraffe0615的博客
11-03 735
把display:flex改成display:inline-flex，将对象作为内联块级弹性伸缩盒显示，类似与是子元素将父元素撑开，样式就显示出来了
小程序scroll设置（滚动轴样式、真机测试不能滑动）
qq_37493515的博客
08-07 2155
一、先说scroll真机测试不能滑动的问题 我用的是微信官方推荐的方式：使用方法具体的可直接到微信小程序开发文档中找到 <view> <scroll-view scroll-y="{{true}}"> // 这行代码catchtouchmove='noMove'，是我做时间选择的时候时间上带的 <view catchtouchmove='noMove'> 我是scroll里面可以滚动的的内容 <picker-view> 我是时间选
微信小程序完美解决scroll-view高度自适应问题的方法
10-14
主要介绍了微信小程序完美解决scroll-view高度自适应问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决微信小程序scroll-view换行问题
01-03
今天在写小程序的时候使用了scroll-view,但是发现在scroll-view中一行文字不能换行，代码如下： ...在网上搜索了一下小程序scroll-view文字不能换行的问题后，发现原来是小程序组件有一个默认的样式 white-space: nowr
微信小程序 scroll-view的使用案例代码详解
10-15
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，它提供了一个可滚动的视图容器，能够处理复杂的滚动需求，包括横向和纵向滚动。本文将深入探讨 `scroll-view` 的使用方法，并通过具体的代码案例进行解析...
小程序overflow滚动条隐藏
m0_60997870的博客
07-07 670
IOS端需要多添加一个 -webkit-overflow-scrolling: touch
微信小程序禁止页面左右滑动
weixin_53760974的博客
01-06 7167
小程序禁止页面左右滑动 1、页面中view设置width:100%之后，页面右边会多出一块白区域，并且可以左右滑动，解决方法是给这个view加一个box-sizing：border-box; 2、直接给最外层的view设置一个overflow-x:hidden; //裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话进行隐藏 3、在json文件里面加 "disableScroll": true 4、给page一个弹性盒子 page { width: 100%; dis...
微信小程序css篇----布局(Layout)
热门推荐
鎏嫣宫守护的博客
12-29 4万+
说到布局，脑子里第一反应出来的就是LinearLayout,RelativeLayout等等,不过现在既然是小程序，那当然得换换思路了，来看看css中有哪些布局方式。 一：布局有以下几种：display，float，clear，visibility，overflow，overflow-x，overflow-y。 1.display：设置对象是否显示。 2.float：指出对象是否及如何浮动。
微信小程序开发实现横向滚动
weixin_43968782的博客
10-10 1100
小程序实现横向滚动
小程序开发总结
sma2mmm的博客
02-28 268
注意 同一套代码应用于不同小程序时，appId一定要切换 一、cover-view 1、只支持overflow-y:auto;不支持横向滚动 2、cover-view 样式实时更新有问题，不能通过判断更新样式 二、web-view 1、内嵌h5的jssdk最好切换至版本1.3.2；支持返回小程序 2、内嵌h5用到公众号的功能（例如扫一扫），使用公众号的APPid和APPSe...
【微信小程序】text-overflow失效
Minf的博客
02-22 1059
overflow:hidden; text-overflow: ellipsis; white-space: nowrap; 上面三个缺一不可，如果仍不行，加下面两行 width: xxx display: inline-block;
微信小程序fixed定位下scroll-view滚动失效
llixiangjian的博客
07-24 1万+
如图，上方nav是scroll-view的方式横向滚动，当给scroll-view的外出div加position: fixed; 定位时，scroll-view滚动就失效了。不知道大家有没有这种滚动的样例，固定在顶部，并且顶部nav可以横向滚动？谢谢 对应的wxml template name="search-fixed"> view class="fixed-container">
如何彻底解决微信小程序滚动穿透问题
qq_31699019的博客
03-02 3051
前言：我们在开发业务的过程中总会有各种样式的弹窗需求，在弹窗弹起来的时候，底部的内容却可以滚动，刚开始我们使用catchtouchmove解决了，但是在复杂一点的情况下还是会导致滚动穿透。今天分享一个永久解决该问题的方法。 使用官方的page-meta组件，这里贴下官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html 通过该组件我们可以直接操作Page组件 ，我们给它的wxss样式overflow动态设置
css中overflow-x:auto无效
Amouzy的博客
02-25 5434
css中overflow-x:auto无效
微信小程序 scroll-view scroll-into-view 无效果
最新发布
01-04
根据提供的引用内容，实现微信小程序中 scroll-view 的 scroll-into-view 无效果可能是由以下几个原因导致的： 1. scroll-into-view 属性的值与要跳转到的锚点标记的 id 属性值一致。例如，如果要跳转到一个 id 为 "anchor1" 的锚点标记，那么 scroll-into-view 的值应该设置为 "anchor1"。 2. scroll-view 容器高度不足：如果 scroll-view 容器的高度不足以显示要跳转到的锚点标记，那么 scroll-into-view 将无法生效。确保 scroll-view 容器的高度足够大，以容纳所有的内容和要跳转到的锚点标记。 3. scroll-into-view 设置在子组件上：scroll-into-view 属性应该设置在 scroll-view 组件上，而不是其子组件上。确保 scroll-into-view 属性被正确地设置在 scroll-view 组件上。 4. scroll-into-view 设置在动态生成的内容上：如果要跳转到的锚点标记是在动态生成的内容中，那么需要在动态生成内容之后再设置 scroll-into-view 属性。因为 scroll-into-view 属性需要等待内容渲染完成后才能生效。 5. scroll-into-view 设置在隐藏的内容上：如果要跳转到的锚点标记是在初始状态下是隐藏的内容中，那么需要在显示该内容后再设置 scroll-into-view 属性。因为 scroll-into-view 属性需要等待内容显示后才能生效。 以下是一个示例代码，演示了如何在微信小程序中使用 scroll-view 的 scroll-into-view 实现锚点跳转效果： ```html <scroll-view scroll-into-view="{{toView}}" scroll-y="true" style="height: 300px;"> <view id="anchor1">锚点1</view> <view id="anchor2">锚点2</view> <view id="anchor3">锚点3</view> <view id="anchor4">锚点4</view> <view id="anchor5">锚点5</view> </scroll-view> <button bindtap="scrollToAnchor">跳转到锚点2</button> ``` ```javascript Page({ data: { toView: '' }, scrollToAnchor: function() { this.setData({ toView: 'anchor2' }) } }) ``` 在上述示例中，scroll-view 组件设置了 scroll-into-view 属性为 toView 变量的值，当点击按钮时，toView 变量的值被设置为 "anchor2"，从而实现了跳转到锚点2的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值