uniapp移动端禁止页面横向拖动滑动

已于 2022-09-07 14:55:53 修改
阅读量1.1k 收藏 2
点赞数 2
文章标签： html css html5
于 2021-07-27 10:20:05 首次发布
原文链接：https://blog.csdn.net/zhangzuruiqqq/article/details/109358002?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162735151416780269850605%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162735151416780269850605&biz
版权 
html,body{overflow:hidden;overflow-y:auto;}

转载自：原博主

爬楼梯的小新
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp 横向滑动日历
需要点灵感
06-08 2682
pages/日历.vue <template> <view> <view class="date-choose shrink"> <view class="data-month">{{ dateMonth }}</view> <swiper class="date-choose-swiper" :indicator-dots="false" :current="swiperCurrent" @change="dateSwip
uniapp 设置map组件不可滑动
m0_66809960的博客
03-03 1082
1.在map组件里面有这两个属性。
uniapp取消scroll横向滚动条
weixin_52563089的博客
03-08 247
uniapp取消scroll横向滚动条
uniapp项目中禁止横屏 ，app不要自动旋转 -，保持竖屏，uniapp取消重力感应
最新发布
骨子里的偏爱
04-23 1784
1.适用于移动端，安卓和IOS，当即使手机打开了自动旋转的按钮，设置如下的代码后，页面依旧保持竖屏。
vue或者uniapp阻止页面滚动
wangongchao的博客
08-05 1359
最近uniapp有个需求，页面底部增加悬浮窗，代码上完之后允许上下拖拽，写完之后发现当页面超出屏幕长度的时候拖拽就瞎跑，悬浮窗上下移动页面也跟着移动，思考了下，在滚动触发的时候把当前页面的滚动条锁死，当拖拽离开屏幕的时候再还原，完美解决，话不多说上代码。完毕，组件引入什么的我就不上代码了，太简单了直接省略。...
支持移动端的jQuery滑动条拖动横向图片滚动特效
01-02
在本文中，我们将深入探讨如何实现一个支持移动端的jQuery滑动条拖动横向图片滚动特效。这个功能是通过使用jQuery插件mCustomScrollbar来完成的，它为网站提供了丰富的自定义滚动条效果，并且能够适应各种设备，包括...
uniapp实现横向滚动选择日期
01-18
本文实例为大家分享了uniapp实现横向滚动选择日期的具体代码，供大家参考，具体内容如下 1.方法封装 common.js //获取当前时间，格式YYYY-MM-DD HH:MM:SS const GetNowTime = time => { var date = time, year = ...
uniapp滑动周组件
07-08
uniapp滑动周组件
Uniapp 横向滚动抽奖页面 组件 引用即可 全端
09-26
引入组件即可 <TC-choujiang></TC-...里面的商品图片和被抽出商品跳转页面按照实际情况进行修改。 商品图片可以从数据库中获取进行赋值即可 位置：uni_modules/TC-choujiang/components/TC-choujiang/TC-choujiang
uniapp scroll-view组件横向滚动不生效
热门推荐
陈小白
11-12 1万+
问题 ： 效果 ： bug ： 横向滚动没有生效。直接换行 解决 在css给滚动组件加上white-space: nowrap; 就可以滚动了，记得不要把子元素设置成块级元素 那会独占一行 换成display: inline-block; 效果 ： ...
uni-app 禁止页面上下滚动的方法
qq_37746495的博客
03-21 5651
uni-app 禁止页面上下滚动的方法
uniapp scroll-view横向滚动无效，scroll-view子元素flex布局不生效
weixin_52941842的博客
08-21 3245
uniapp scroll-view横向滚动无效，scroll-view子元素flex布局不生效
uniapp禁止页面滑动的方法：
nelly521的博客
10-17 1560
{ "path": "pages/client/product/product_equity", "style": { "navigationBarTitleText": "产品介绍", "navigationStyle":"custom" , "transparentTitle": "always", "titlePenetrate": "YES", "enablePullDownRefresh": false,//禁止下滑刷屏 "navigationBa
uniapp在app端页面上下左右滑动问题，禁止上下左右滑动影响canvas和触摸事件
qq_42682622的博客
03-24 3095
当在app端运行uniapp项目时会有页面回弹效果，即页面拉到最上面或最下面时有一定的拉伸效果让页面更加柔和，但有些场景我们不希望有这种效果，比如页面中有触摸事件产生图形化效果时，比如有个能画画的canvas画布时此时如果存在回弹效果或滑动效果就会影响画图，通过上图中搜索框和canvas画布的拉伸可以看出影响。
uniapp 禁止动态禁止页面上下滚动
wangongchao的博客
08-09 2022
现在有个需求是在当前页面添加可拖拽的悬浮球，但是页面长度太长，当拖拽的时候，球和页面一起滚动，很是苦恼，但是当页面没有滚动条的时候悬浮球是正常的，所以判断是页面太长，悬浮球计算了整个页面的高度来计算激动的，而不是可视区域，所以，有个思路，当手指触屏的时候把页面锁死，手指离开屏幕的时候解除限制，这样悬浮球可自行移动，页面不滚动，完美解决，废话不多说上代码。...
uniapp项目中禁止横屏 - app不要自动旋转 - 保持竖屏的方法
Rudon滨海渔村的博客
05-10 7462
效果图 ... 就是手机横屏时，app保持竖屏...的样子 实现步骤 修改/App.vue，在onLaunch里面设置不允许横屏： <script> export default { onLaunch: function() { console.log('App Launch') plus.screen.lockOrientation("portrait-primary") }, onShow: function() { console.log('A
uniapp禁止屏幕自动旋转
zmx781284440的博客
04-19 2500
2.第二步在manifest.json中配置。
css元素可拖动,如何使用CSS禁止元素拖拽？
weixin_32597009的博客
08-03 4062
一、用户行为三剑客以下3个CSS属性：user-select属性可以设置是否允许用户选择页面中的图文内容；user-modify属性可以设置是否允许输入框输入内容，以及是否只允许输入纯文本，详见“如何让contenteditable元素只能输入纯文本”一文；user-drag属性可以设置是否允许页面元素拖拽。而本文要介绍的主角就是最后的user-drag属性。二、user-drag禁止拖拽页面中的...
uni-app开发微信小程序,禁止弹窗下方页面滑动类似于遮罩；禁止弹窗页面内容滑动
weixin_45395283的博客
09-05 1618
uni-app开发微信小程序,禁止弹窗下方页面滑动类似于遮罩；禁止弹窗页面内容滑动
uniapp scroll-view横向滑动
09-04
在uniapp中，可以使用scroll-view组件实现横向滑动效果。需要注意以下几点： 1. 在scroll-view组件上设置scroll-x属性为true，以启用横向滚动效果。 2. 为了确保横向滚动生效，需要给scroll-view组件设置white-space: nowrap属性，以防止内容换行。 3. 为了正确显示内容，需要设置scroll-view组件的固定宽度和高度。 4. 如果需要在横向滚动中放置多个子元素，则可以使用行内块的方式排列这些元素，便于滑动和排列一行。 以下是一个示例代码： ```html <scroll-view class="scrollView" scroll-x="true"> <view> <shopListItem class="recomItem" :commodityList="commodityList" wrap="no-wrap" width="160rpx" height="160rpx"></shopListItem> </view> </scroll-view> ``` 在上述示例代码中，scroll-x属性被设置为true，以启用横向滚动效果。scroll-view组件的子元素使用了行内块的方式排列，以便在一行中滑动和排列。 注意，需要在全局文件App.vue中添加样式来去除scroll-view的滚动条。可以使用以下代码： ```css /* 去除scroll-view滚动条 不支持nvue页面 */ ::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent; } ``` 通过以上步骤，你可以在uniapp中实现横向滑动的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [uniapp之scrollview图片区域滚动（横向滚动）](https://blog.csdn.net/qq_31676483/article/details/121156989)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值