微信小程序 解决同个页面两个scroll-view独立滚动的问题

最新推荐文章于 2023-02-11 17:35:39 发布
最新推荐文章于 2023-02-11 17:35:39 发布
阅读量1.1k 收藏 1
点赞数 4
分类专栏： 微信小程序 文章标签： 小程序 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/deep_zhuheihei/article/details/119899695
版权
分享在黑马优购教程中如何通过style属性实现两个`scroll-view`组件各自独立滚动的解决方案，只需设置高度为100vh即可

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

关于微信小程序解决两个scroll-view独立滚动的问题是我在学习写黑马优购时碰到的问题
请添加图片描述
只要在标签里分别加入style="height:calc(100vh)"就可以了

【微信小程序开发（17）---页面两侧滚动效果--模拟 + 实现】
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
01-11 856
模拟 category文件中： index.js import { request} from "../../request/index.js"; Page({ data: { //左侧的菜单数据 leftMenuList:[], //右侧的商品数据 rightContent:[] }, //接口的返回数据 Cates:[], onLoad: function (options) { this.getCates(); }
uniapp的双联滚动案例
骑着双鱼去赶集
07-18 1197
双联组件右部采用单排显示，感觉效果比双排好，可完整显示图片，以及不会因为标题长短不一出现显示不美观。注意部分组件为自定义组件，您可以删除或更换自己的组件，本例仅为示例代码。基本VUE3，兼容VUE2的UI组件正在开发中，届时免费提供大家使用。本例采用左右scrollview组件实现双联滚动。以下为正在使用本组件的一只个人项目管理小程序案例。双联滚动在做商城时经常会用到。...
微信小程序解决同个页面两个scroll-view独立滚动的问题
weixin_44347851的博客
07-16 2878
微信小程序中，如果我们把窗口分为左右两个scroll-view，比如做商品列表，一般设置后会出现两个scroll-view窗口同时滚动的问题。其实这个问题很好解决，只要定义scrollview的高度就行了，不过写法必须是这样的。...
原生微信小程序，scroll-view的使用，一屏两个滚动区域，scroll-y（纵向滚动）
qq_40893035的博客
09-01 5339
原生微信小程序，scroll-view的使用，一屏两个滚动区域，scroll-y（纵向滚动） 这个会简单很多 结构层 <view class="container"> <!-- scroll-view标签在使用时，可以当做普通的view标签使用，可以设置很多属性改变XY轴滚动 --> <!-- 左侧滚动栏 --> <!-- view{$}*100可以一次打印1-100内容的view标签 --> <scroll-view scroll-y
有两个怎么修改scroll-view组件，滑动一个scroll-view组建的时候，另一个怎么修改scroll-view组件可以同步滑动，这个代码要怎么写...
weixin_42593701的博客
02-11 329
如果要修改scroll-view组件并使两个scroll-view组件在滑动一个时同步滑动，可以使用以下方法： 给两个scroll-view组件分别绑定滑动事件，在滑动一个scroll-view组件时，通过代码设置另一个scroll-view组件的滑动位置。 使用JavaScript代码监听一个scroll-view组件的滑动事件，在滑动时动态更新另一个scroll-view组件的滑动位置。 ...
微信小程序 点击切换样式scroll-view实现代码实例
10-16
在微信小程序中，`scroll-view`组件是一种常用于实现页面滚动功能的组件，它可以水平或垂直滚动内容。本文将详细讲解如何通过点击事件切换`scroll-view`中的样式，并提供一个具体的代码实例。 首先，我们需要了解`...
微信小程序 scroll-view隐藏滚动条详解
08-31
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，它主要用于实现页面内的滚动效果。本篇将详细讲解如何在微信小程序的 `scroll-view` 中隐藏滚动条以及与页面跳转相关的技巧。 首先，我们要了解如何隐藏 ...
微信小程序scroll-view的滚动条设置实现
10-15
在微信小程序开发中，`scroll-view` 是一个常用的组件，用于实现可滚动的内容区域。本文主要探讨了如何在微信小程序的 `scroll-view` 组件中设置滚动条的样式和行为，尤其是在 Android 和 iOS 平台上的差异处理。 ...
微信小程序 scroll-view的使用案例代码详解
10-15
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，它提供了一个可滚动的视图容器，能够处理复杂的滚动需求，包括横向和纵向滚动。本文将深入探讨 `scroll-view` 的使用方法，并通过具体的代码案例进行解析...
异常处理——同一页面多个scroll-view组件时一起滚动的bug
番薯大佬的专栏
04-25 6840
WeChat小程序交流（QQ群：769977169）根据业务需求，需要在同一个页面中使用到多个scroll-view组件，且都是垂直滚动的。如左边是商品的一级分类列表，右边是商品的二三级分类列表，一级分类列表上下滚动时不影响右边的二三级分类列表，右边的二三级分类列表上下滚动时也不影响左边的一级分类列表。但如果没有处理好的话，则会造成一级分类列表上下滚动时，二三级分类列表同时上下滚动。不正常的效果图...
小程序两个scroll-view解决点击穿透问题思路
caoyan0829的博客
07-25 5135
1. 页面整体是一个滑动view，然后下面有一个点击展开的小的滑动view。 2.思路： 当下面的小view展开时，js控制整体大view为 fixed ；然后height变小， 使得 变小后的大view + 小view = 整体高度。 3.小view展开时，给变小后的大view 加一个透明的黑色蒙层，上面加上 catchtouchmove="preventD"   左边分享一个公众号...
uniapp 两个scroll-view相互作用
呐呐呐
06-30 7825
如何在uniapp，scroll-view标题和scroll-view内容相互联动效果? talk is less, show the code: <template> <view class="img-show-wrap fz"> <scroll-view class="tabs-con" scroll-x="true" scroll-with-animation :show-scrollbar=false> <view class="tabs-con
解决小程序同一个页面不同tab下的scroll-view同步滚动的问题
weixin_45483535的博客
03-16 1208
解决小程序同一个页面不同tab下的scroll-view同步滚动的问题 排查发现是因为页面滚动条也触发了，滚动scroll-view的区域会发现页面滚动条也生成了，所以导致两个scroll-view同步滚动。 只需要给最外层的view加overflow: hidden即可，最外层的view需要有高度； ...
微信小程序scroll-view两个页面的滚动
qq_48354174的博客
12-25 952
从当前页面跳到下个页面时，scroll-view发生滚动到相应的位置 官方组件： https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 首先需要给scroll-view动态设置一个scroll-left="{{scrLeft}}"（设置横向滚动条位置） 然后再获取点击值的下标并把下标赋值进去 wx.getSystemInfoSync()来获取设备的信息，更新 data 数据的值，然后把getScrLeft方法带
scroll-view标签设置了scroll-y属性两屏幕一起滚动
m0_59855881的博客
03-03 339
1.父盒子是否加高度，2.calc方法里面的减号两边一定要加空格。 .cates_container { height: calc(100vh - 90rpx); }
VS编程，WPF中两个滚动条 ScrollViewer 同步滚动的一种方法
君一席
10-27 3175
这里以两个ScrollViewer控件之间的同步滚动为例。 当鼠标拖动其中一个滚动条时，另一个滚动条跟着一起调整到相应的位置。   1、前台创建两个ScrollViewer控件，并分别给两个滚动条控件命名。 &lt;StackPanel Orientation="Horizontal"&gt; &lt;ScrollViewer BorderT...
微信小程序scroll-view锚点链接滚动实现详解
本文主要探讨了在微信小程序中如何实现scroll-view组件的锚点链接滚动跳转功能。通过示例代码和解释，帮助开发者理解如何在scroll-view中绑定事件和设置属性，以便用户点击列表项时能平滑滚动到对应的目标内容。 在...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

碑无名

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值