uni-app 如何避免页面滑动

最新推荐文章于 2024-03-24 17:45:36 发布
最新推荐文章于 2024-03-24 17:45:36 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： uni-app 文章标签： css css3 前端 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43952913/article/details/122130994
版权

问题

编写完页面时候，扫码测试，在浏览器中，手指下滑上滑导致页面上下滑动，很不符合正常app的效果。

解决

在控件最父层的css属性，给予

	display: flex;
	position: fixed;
	width: 100%;

即可解决问题！

antlers777_
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp在ios端每个页面都可以上下拉，阻止方法
qq_40666120的博客
12-24 4646
{ "path": "pages/helpCenter/Index", "style": { "app-plus": { "bounce": "none" } } } “bounce”: “none” 配上这个
【uniapp】禁止页面上下滚动
y_coder的博客
10-30 3041
则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在。属性控制，该属性默认为。
uniapp在app端页面上下左右滑动问题，禁止上下左右滑动影响canvas和触摸事件
最新发布
qq_42682622的博客
03-24 1275
当在app端运行uniapp项目时会有页面回弹效果，即页面拉到最上面或最下面时有一定的拉伸效果让页面更加柔和，但有些场景我们不希望有这种效果，比如页面中有触摸事件产生图形化效果时，比如有个能画画的canvas画布时此时如果存在回弹效果或滑动效果就会影响画图，通过上图中搜索框和canvas画布的拉伸可以看出影响。
前端uniapp防止页面整体滑动页面顶部以上，设置固定想要固定区域宽高
m0_49714202的博客
09-28 873
前端uniapp防止页面整体滑动页面顶部以上，设置固定想要固定区域宽高
uni.pageScrollTo滚动时出现抖动问题
Syleapn的博客
06-02 8080
uni-app中，将页面滚动到顶部，有两种方式： 一、使用scroo-view标签中的@scrolltoupper实现 二：使用uni.pageScrollTo实现 近期在做视频类的一个重播功能，要求点击“重播”按钮后页面能够回到顶部（由于视频在页面的顶部，这样点击“重播”后不会跳到视频之外的其他地方），用uni.pageScrollTo来实现，但是发现三个问题： ...
uniapp-scroll-view纵向(竖向)滑动当scrollTop为0时卡顿问题
m0_50080847的博客
12-21 1023
这个问题目前遇到的人少，所以找到答案不容易，我也是各种细节亲测才发现的解决方案。记录下来 当uniapp用scroll-view竖向滚动时，在scrollTop为0时，下拉会卡顿。 解决方法(只需要在app-plus里加上"bounce":"none",就可以了 ,{ "path" : "components/scollTest/scollTest", "style" : ...
uniapp scroll-view防抖
weixin_57925162的博客
11-22 1273
scrollTop属性用法需要保存scroll时的值，如果在scroll时直接复制给scrollTop的话 就会出现页面抖动。解决办法：scroll时复制给一个变量，点击换一换时再将变量赋值给scrollTop。
移动端滑动下滑时抖动处理
weixin_30335575的博客
07-09 1322
1、封装为组件，方便调用<template lang="pug"> .scroll-lock-container(@touchstart="onTouchStart" @touchmove="onTouchMove") slot</template><script> export default { name: ...
微信小程序scroll-view滚动到底部一直抖动
qq_39931894的博客
10-21 1681
微信小程序滚动到底部一直抖动 微信小程序中使用了scroll-view之后，滚动到底部就会一直在抖动。 解决办法： 1.把scroll-view里面的fixed元素全部放到外面，里面不要有fixed元素 2.用page默认的滚动
uni-app列表项实现左划操作功能
02-25
uni-app列表项实现左划操作功能。 开箱即用。
uni-app自定义组件之菜单左右滑动并点击切换选中居中显示.zip
09-30
计算每个子元素的宽度，点击时获取当前点击元素索引，当前点击子元素距离左边栏的距离 - scroll-view 宽度的一半 + 当前点击子元素一半的宽度 实现居中展示。
uni-app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master.zip
12-17
uni-app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master.zip
uni-app开发实例
03-16
开发实例，包含页，tab自定义导航栏，滑动列表，搜索页面等
swiper轮播图息屏一段时间或快速滑动切换时出现疯狂抖动
Syleapn的博客
07-26 4509
gitHub代码下载：https://github.com/Syleapn/uni-app-swiper 以前做小程序项目的时候，没专门测试人员，都是开发者自测，可能我的手机性能比较不错（哈哈）或时机不对，总之没发掘到这个bug；近期做项目，测试了不同的手机，发现在一些手机上会出现这个bug,尤其是对于性能差的一些手机，出现的概率尤其的大。由于本次项目是基于uni-app的，直接就用uni-ap...
uni-app - APP平台禁止页面滑动（无法上下滚动屏幕页面）
王佳斌
12-23 1万+
前言 注意：仅 APP 平台，在 pages.json 中进行配置。 有些时候，我们需要将页面固定住，让用户无法下拉与滚动页面。 全局配置 在 globalStyle 中进行配置，便是所有页面均有效。 "globalStyle": { "app-plus": {//app平台 "bounce": "none"//禁止滚动 } }, 局部配置 在该页面 style 中进行配置，仅对该页有效。 "path": "pages/login/login", "style": { "app-plus":
uniapp禁止页面上下滚动
热门推荐
Dream_Fever的博客
06-21 2万+
uniapp禁止页面上下滚动的方法
【其他】页面自动滚动到顶部
每天进步一点点, 靠近小目标一点点~
06-26 1799
页面自动滚动到顶部
uniapp 页面 内容超过屏幕高度，就会导致产生页面滚动
tengyuxin的博客
09-28 5810
问题是如何动态设置沾满屏幕的高度，我想要flex:auto，这样就很方便。”这个模块，循环100此后，就会超出页面高度，就会产生页面滚动，连带着“所以，在app.vue界面设置 page{ height: 100% }解决思路如下：要给scroll-Y设置一个固定高度，这样就会产生滚动条。”这个模块也跟着滚动。
解决小程序页面scroll-view块自身滑动问题
qq_58614993的博客
02-27 745
解决scroll-view块自身滑动
uni-app图片横向滑动
02-19
uni-app是一个基于Vue.js的跨平台开发框架可以用于开发iOS、Android、H5等多个平台的应用程序。在uni-app中实现图片横向滑动可以通过使用swiper组件来实现。 首先，在uni-app的页面中引入swiper组件，可以在页面的template中添加以下代码： ```html <swiper class="swiper" :autoplay="true" :interval="3000" :duration="500"> <swiper-item v-for="(item, index) in imageList" :key="index"> <image :src="item"></image> </swiper-item> </swiper> ``` 其中，swiper组件是用来包裹swiper-item组件的容器，swiper-item组件用来展示每个图片。imageList是一个存储图片路径的数组，可以在data中定义并初始化。 接着，在页面的style中添加以下样式代码： ```css .swiper { width: 100%; height: 200px; } .swiper-item { width: 100%; height: 100%; } .image { width: 100%; height: 100%; } ``` 这些样式代码用来设置swiper和swiper-item的宽度和高度，以及图片的宽度和高度。 最后，在页面的script中定义imageList数组，并给它赋值，示例代码如下： ```javascript export default { data() { return { imageList: [ 'https://example.com/image1.jpg', 'https://example.com/image2.jpg', 'https://example.com/image3.jpg' ] } } } ``` 这样就可以实现图片横向滑动效果了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值