uniapp中的scroll-view实现：

最新推荐文章于 2024-07-13 12:53:52 发布
最新推荐文章于 2024-07-13 12:53:52 发布
阅读量322 收藏
点赞数
文章标签： 前端 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69241579/article/details/131466729
版权
本文介绍了uni-app中scroll-view组件的用法，包括纵向和横向滚动。通过示例展示了如何设置scroll-y、scroll-x属性，以及监听滚动事件如@scrolltoupper、@scrolltolower、@scroll。同时提到了在webview中滚动性能的问题，并提供了返回顶部的功能实现。
摘要由CSDN通过智能技术生成

介绍：可滚动视图区域。用于区域滚动。

需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。

实例：

<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-title uni-common-mt">
                Vertical Scroll
                <text>\n纵向滚动</text>
            </view>
            <view>
                <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
                    @scrolltolower="lower" @scroll="scroll">
                    <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
                    <vie

最低0.47元/天 解锁文章
贰拾伍7
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp-【scroll-view】
if.else.Z
03-19 2177
属性名 类型 默认值 说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 lower-threshold Number 50 距底部/右边多远时（单位px），触发 scrolltolower 事件 scr
uniapp中完美解决scroll-view的动态高度问题
weixin_44953151的博客
07-11 534
"> 测试高度 -->// 容器高度 = 可使用窗口高度 - 滚动容器距离顶部位置。-- 测试高度会不会影响固定滚动，可以删除 -->label: '测试' + index,// 获取滚动容器css数据。
uniapp scroll-view
秋来九月八
02-28 5741
使用scorll-view横向拖动应该注意些什么？ 1.scroll-view 中的需要滑动的元素不可以用 float 浮动； 2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的； 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排； 4.包裹 scroll-view 的大盒子有明确的...
【uniapp】小程序开发8：滚动组件scroll-view
不积跬步无以至千里，不积小流无以成江海。一个喜欢学习分享的程序员
12-11 4097
我们经常需要做页面中部分内容可以滚动的功能，例如“猜你喜欢”，内容太多，通常都会超出屏幕，那么此块区域应该可以滚动，但是顶部的自定义导航栏应该不能随着滚动。 这个时候，就可以使用uniapp提供的滚动组件scroll-view。
uniapp使用scroll-view
weixin_47961174的博客
03-09 542
wu
uni-app的scroll-view
jwq
04-16 1067
uni-app的scroll-view <template> <view class="j-scroll"> <!-- scroll-x是允许横向滚动 scroll-y是允许纵向滚动--> <scroll-view scroll-x> <!-- 这里面放内容--> </scroll-view </view> </template> <style scoped lang=
关于scroll-view和下拉刷新的那些坑
03-29
众所周知，小程序不支持操作dom元素，但最近公司做了这样的一个功能，滚动scrollview 标签，当页面滚动到一定的...scroll-view scroll-y="true" style="height: {{scrollViewHeight}}rpx;" bindscroll="scrollviewScrol
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
在uni-app框架中，`scroll-view`组件是一个非常实用的工具，它允许开发者实现横向和纵向的滚动，并且可以添加滚动回调功能，以便在用户滚动时执行特定的操作。下面将详细讲解uni-app的`scroll-view`组件及其相关的...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，用于实现页面的滚动效果。在某些场景下，我们可能需要实现滚动穿透或者阻止`scroll-view`的滚动，以达到特定的交互效果。本文将详细介绍如何在微信小程序...
微信小程序 scroll-view的使用案例代码详解
10-15
总结，微信小程序中的 `scroll-view` 组件是实现滚动效果的关键，它支持自定义滚动方向、滚动位置控制以及滚动事件监听。正确理解和使用这些特性，可以帮助开发者创建更加丰富、交互性更强的小程序页面。
uni-app之scroll-view组件
Li-的博客
08-31 1万+
uni-app使用scroll-view组件不生效的问题 横向滚动不生效 横向滚动不生效的问题是因为少了两行代码： white-space: nowrap; display:inline-block; 纵向滚动 必须指定滚动区域的高度。 不设置高度的话，scroll-view是不会滚动的，此时滚的是页面。 ...
uni-app组件之scroll-view的详细教程
码奴一只猿
05-25 8150
scroll-view 是 UniApp 中的一个重要组件，它提供了在视图区域内滚动内容的功能。无论是在小程序、H5 还是 APP 端，scroll-view 都能够帮助你实现滚动内容的需求。本教程将详细介绍如何在 UniApp 中使用 scroll-view 组件，并提供示例代码供参考。
uniapp scroll-view基础用法
lxgyydsgod的博客
08-07 2万+
在uniapp日常开发的过程中经常会有局部滚动的需求，而scroll-view组件正好可以满足这一需求。本篇主要介绍了一些scroll-view的基础用法
uniapp内置组件scroll-view案例解析
Python私教
07-13 928
参考资料 文档地址：https://uniapp.dcloud.net.cn/component/scroll-view.html 官方给的完整代码 <script> export default { data() { return { scrollTop: 0, old: { scrollTop: 0 } } }, methods: { upper: function(e) { console.log(e) },
uni-app 可滚动视图区域scroll-view的使用
lsjweiyi的博客
03-31 3873
官方文档 <template> <!-- 外围视图使用flex布局 --> <view style="display: flex" id="view1"> <!-- 左侧滚动区域 --> <view style="width: 25%"> <scroll-view scroll-y="true" :style="'height:' + scrollH + 'px'"&gt
uniapp小程序之scrollview组件
Mr丶·Zhou博客
05-14 207
需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。
uniapp滑动器scroll-view
m0_49714202的博客
04-13 214
主要点： 1.scroll-x=“true” 2./ 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。 / white-space: nowrap；【写于scroll-view】 3.内容：display: inline-block; <template> <view> <view> <view> <!-- scroll-left="120"；右边的元素上来的距离 --> <scroll-view cl
uniapp-滑动器scroll-view
热门推荐
qq_43239475的博客
03-01 3万+
主要点： 1.scroll-x=“true” 2./* 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。 */ white-space: nowrap；【写于scroll-view】 3.内容：display: inline-block; &lt;template&gt; &lt;view&gt; &lt;view&gt; &lt;view&gt; &lt;!--...
uniapp中scroll-view实现左侧右侧联动
最新发布
07-26
在uni-app中，`<scroll-view>` 组件用于创建滚动视图容器，用户可以在其中滑动查看内容。当想要实现在 `<scroll-view>` 中左右两侧的内容联动时，通常需要利用到事件监听、数据绑定以及一些自定义的计算逻辑。 ### 实现原理 1. **事件监听**：首先，在主 `<scroll-view>` 内部设置滚动事件，如 `bindscroll` 或者直接使用 `@scroll`，以便获取滚动位置信息。 ```javascript <scroll-view scroll-x="true" bindscroll="onScroll"> <!-- 内容区域 --> </scroll-view> ``` 其中 `scroll-x="true"` 表示水平滚动。 JavaScript 部分： ```javascript export default { data() { return { scrollLeft: 0 // 初始化滚动位置为0 }; }, methods: { onScroll(e) { this.scrollLeft = e.detail.scrollX; // 获取当前滚动位置 } } }; ``` 2. **数据绑定**：基于获取到的滚动位置，可以将这个值应用于另一个 `<scroll-view>` 的 `scroll-left` 属性上，以此实现联动效果。 ```html <view class="container"> <!-- 左侧联动滚动区 --> <scroll-view scroll-x "true" :scroll-left="scrollLeft"> <!-- 左侧内容 --> </scroll-view> <!-- 右侧内容 --> <scroll-view scroll-y="true"> <!-- 右侧内容 --> </scroll-view> </view> ``` 3. **计算属性/方法**：如果需要更复杂的效果，比如根据滚动的位置调整右侧内容的高度或其他动态属性，可以使用 Vue.js 的计算属性或方法来实现。 ### 相关问题: 1. 在 `uni-app` 中如何控制滚动视图的动画效果? 2. 如何在 `uni-app` 中实现垂直滚动视图的自动跟随？ 3. `uni-app` 中如何优化滚动性能避免卡顿现象？
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值