(app)ScrollView在移动端无效问题

已于 2022-10-13 12:35:41 修改
阅读量470 收藏
点赞数
分类专栏： VUE 文章标签： 前端
于 2022-10-13 12:13:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44754635/article/details/127298558
版权

(app)ScrollView在移动端无效问题

（scroll-view）小程序有效，app无效

在这里插入图片描述

<!-- 分类导航 -->
<scroll-view class="navScroll"  enable-flex scroll-x >
	<view class="navItem" v-for="(item, index) in navItemList" :key="item.id" >
		<view :class="navId == item.id?'navContent active': 'navContent'" @click="changeNav" :id="item.id" >{{item.value}}</view>
	</view>
</scroll-view>
（Horizontal-scroll-view）都有效

在这里插入图片描述

<!-- 分类导航 --> 
<Horizontal-scroll-view class="navScroll"  enable-flex scroll-x >
	<view class="navItem" v-for="(item, index) in navItemList" :key="item.id" >
		<view :class="navId == item.id?'navContent active': 'navContent'" @click="changeNav" :id="item.id" >{{item.value}}</view>
	</view>
</Horizontal-scroll-view>

解决参考：https://blog.csdn.net/fumin466566941/article/details/52872063?spm=1001.2101.3001.6650.17&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-52872063-blog-105169150.pc_relevant_3mothn_strategy_and_data_recovery&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-52872063-blog-105169150.pc_relevant_3mothn_strategy_and_data_recovery&utm_relevant_index=25

nyf_unknown
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
scrollView 宽高无效
吴蕴强的博客
08-23 1090
Environment react-native -v:0.46.4 node -v:v8.3.0 npm -v:5.3.0 yarn --version:0.27.5Target Platform: android && ios Development Operating System: mac10.12.5 Build tools:webstorm Steps to Reproducecode
Android ScrollView设置宽度无效
qq_46290634的博客
10-24 2826
<ScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbarSize="3dp" //设置滚动条的宽度 android:scrollbarThumbVertical="@drawable/scroll" android:scrollbarThumbHorizontal="@drawable/scroll"
Scrollview无效原因
qq_33256701的博客
11-16 1910
1、scrollview在和画板paitview同时作用下无效； 2、scrollview在ConstraintLayout布局里面无效，可以换为LinearLayout布局。
uniapp scroll-view组件ios滚动条失效解决方式
最新发布
baibai_b的博客
12-18 987
uniapp scroll-view组件ios滚动条失效解决方式
ScrollView
江苏小白龙
12-18 338
滚动视图本身不显示，或者只显示一个背景，主要负责子视图的滚动和翻页。是一个没有文字的TextView。多用于图片的显示，或者布局的更改（如，弹出键盘时，可以使用滚动视图，来操作布局向上滚动） 【注】UIScrollView常用有四个子类，UITextView，UITableView,UICollectionView,UIWebView 一.基本属性 //scrllervi...
uniapp scroll-view滚动条不显示及IOS中问题
細水、長流√的专栏
02-27 3716
最近在对小程序进行一些优化，发现 scroll-view 的两处问题1、IOS手机下scroll-view会存在上拉加载时卡顿情况2、IOS手机下scroll-view会存在点击不触发 navigator-hover 里的css没有找到什么好的解决办法，故只有用view替代了scroll-view。
uniapp-scrollview实现双联动.zip
07-27
在本文中，我们将深入探讨如何使用uni-app的ScrollView组件实现双联动效果，这是一种常见的前端交互设计，常见于导航菜单与内容区域的同步滚动。在微信小程序等移动应用开发中，这种功能可以提供良好的用户体验，使...
Android 解决ScrollView嵌套CridView显示问题
08-29
当需要在一个页面中同时使用ScrollView来实现整体滚动，并且要在其中包含一个GridView时，可能会遇到显示不全的问题。这是因为ScrollView本身就已经具备了滚动功能，而当它试图包裹一个同样具有滚动能力的GridView时...
Android 中ScrollView与ListView冲突问题的解决办法
08-29
在Android开发中，ScrollView和ListView是两种常用的布局组件。ScrollView是一个可以包含多个子视图并允许用户滚动查看所有内容的容器，而ListView则用于显示大量的数据，并且支持滚动，通常用于列表形式的数据展示...
踩坑——阻止默认事件导致的移动端滑动失效，解决滑动穿透
qq_43513715的博客
08-24 742
原因 为了防止移动端弹窗滚动穿透到底层，做了一个弹窗蒙版，并且阻止了底层的默认事件。但是阻止默认事件会影响到子元素，于是就导致了这个bug——弹窗也无法滚动了。 stopPropagation 这个方法很常见，是阻止捕获和冒泡阶段中当前事件的进一步传播，意思就是不冒泡也不捕获，阻止父与子之间事件的传递。 当你调用了stopPropagation，且为冒泡模式，点击子元素，不会触发父元素事件。 捕获模式，点击子元素，不会触发子元素事件。 用stopPropagation就可以阻止默认事件是否触发的设置在子父元
uniapp——scroll-view手机预览不显示数据
World_Mei的博客
07-28 1738
今天在做项目的时候发现scroll-view组件内的数据在页面上渲染在微信开发者工具中可以正常显示，但是手机预览数据不显示，代码如下： <scroll-view scroll-y class="sqList"> <block v-for="(item,index) in sqlistData" :key="index"> <view class="sq" @tap="selectSQ">{{item.name}}</view> </block&g
解决scroll-view在小程序，app端出现滚动条的问题
SkipCode Blog
07-08 980
// 解决scroll-view出现滚动条 ::-webkit-scrollbar{ display: none; } uni-scroll-view .uni-scroll-view::-webkit-scrollbar { /* 隐藏滚动条，但依旧具备可以滚动的功能 */ display: none }
笔记 ScrollView(滚动视图)类:
兔丸的博客
06-30 302
在默认情况下内容超出屏幕范围将不显示,android布局管理器本身没有提供滚动屏幕的功能,所以就有了ScrollView组件支持滚动屏幕 ScrollView类是android.widget.FrameLayout(帧布局管理器)的子类,在滚动视图中可以添加任何想要放入其中的组件,但是一个滚动视图只能放置一个组件,如果想放置多个可以在滚动视图中放置一个帧布局管理器,再将要放置的其他多个组件放置到该...
微信小程序开发 scroll-view enable-flex失效的解决方法
ricoshallow的博客
06-21 2589
方法1： 在外盒子<scroll-view>使用white-space: nowrap来禁止子盒子换行，需要将子盒子设置为行内块级元素display: inline-block，这个方法无法设置子盒子之间的间距 margin属性会失效 页面结构（.wxml） <!-- 内容区 --> <scroll-view class="recommendScroll" scroll-x> <view class="scollItem">
uniapp中scroll-view滚动失效解决方法
m0_43377799的博客
04-13 4554
uniapp中scroll-view滚动失效解决方法
微信小程序 scroll-view 左右横向滑动没有效果（无法滑动）问题
Joan_OvO的博客
05-10 2885
4.包裹 scroll-view 的大盒子有明确的宽和加上样式--> overflow:hidden;3.scroll-view 中的需要滑动的元素要用 dislay:inline-block;进行元素的横向编排；2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex;1.scroll-view 中的需要滑动的元素不可以用 float 浮动；
微信小程序开发随笔之scroll-view安卓滚动不生效
SuperYang的博客
04-02 1309
一、问题描述 设置微信小程序scroll-view竖向滚动，高度为100vh时，在模拟器以及IOS上都正常滚动，在android系统上却无法滚动。 二、解决办法 设置属性：overflow-y: scroll; 三、部分代码 WXML WXSS 四、拓展 ...
uniapp scroll-view基础用法
热门推荐
lxgyydsgod的博客
08-07 2万+
在uniapp日常开发的过程中经常会有局部滚动的需求，而scroll-view组件正好可以满足这一需求。本篇主要介绍了一些scroll-view的基础用法
uniapp使用scroll-view的:scroll-into-view=“lastChatData“跳到某个元素id时候，在app上不生效，小程序没问题
sjt1010的博客
11-25 1750
lastChatData定义的要跳转元素的id app上不生效或者没有跳到合适位置，只需要加一个一次性定时器来延迟赋值就ok。 如： setTimeout(()=>{ that.lastChatData = 元素id },500)
将TabLayout固定在ScrollView的顶部
05-30
要将TabLayout固定在ScrollView的顶部，可以使用以下方法： 1. 使用CoordinatorLayout和AppBarLayout 将ScrollView作为CoordinatorLayout的子视图，并将AppBarLayout作为ScrollView的直接父视图。在AppBarLayout中添加TabLayout和Toolbar，然后使用app:layout_scrollFlags属性将Toolbar和TabLayout与ScrollView关联起来。 例如： ``` <androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <com.google.android.material.appbar.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways"> <!-- Toolbar content --> </com.google.android.material.appbar.Toolbar> <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" app:tabGravity="fill" app:tabMode="fixed"> <!-- TabLayout content --> </com.google.android.material.tabs.TabLayout> </com.google.android.material.appbar.AppBarLayout> <ScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <!-- ScrollView content --> </ScrollView> </androidx.coordinatorlayout.widget.CoordinatorLayout> ``` 2. 使用NestedScrollView和LinearLayout 将TabLayout和ScrollView放在一个LinearLayout中，然后将LinearLayout放在NestedScrollView中。在TabLayout中添加app:layout_scrollFlags属性，并将其设置为scroll|enterAlways。 例如： ``` <androidx.core.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:tabGravity="fill" app:tabMode="fixed"> <!-- TabLayout content --> </com.google.android.material.tabs.TabLayout> <ScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <!-- ScrollView content --> </ScrollView> </LinearLayout> </androidx.core.widget.NestedScrollView> ``` 注意：在使用第二种方法时，TabLayout必须是LinearLayout的第一个子视图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值