开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

防止在菜单切换时滑动页面

可以通过以下几种方式实现：

CSS属性overflow：hidden 在菜单切换时，可以通过给页面的根元素（通常是<body>标签）设置CSS属性overflow：hidden来禁止页面滑动。这样可以防止用户在菜单切换时滑动页面。具体代码如下：body { overflow: hidden; }
JavaScript禁止滚动事件可以通过JavaScript监听滚动事件，并在菜单切换时禁止滚动。具体代码如下：function disableScroll() { // 判断浏览器是否支持addEventListener方法 if (window.addEventListener) { // 监听滚动事件 window.addEventListener('scroll', preventDefault, false); } else { // 兼容旧版本IE浏览器 window.attachEvent('scroll', preventDefault); } }

function enableScroll() {

 // 判断浏览器是否支持removeEventListener方法

 if (window.removeEventListener) {

   // 移除滚动事件监听

   window.removeEventListener('scroll', preventDefault, false);

 } else {

   // 兼容旧版本IE浏览器

   window.detachEvent('scroll', preventDefault);

}

function preventDefault(e) {

 // 阻止默认滚动行为

 e.preventDefault();

}

在菜单切换时调用disableScroll函数禁止滚动，切换完成后调用enableScroll函数恢复滚动。

使用position: fixed 可以将菜单设置为position: fixed，使其固定在页面上，不随页面滚动而滑动。具体代码如下：.menu { position: fixed; top: 0; left: 0; width: 100%; }将菜单的HTML元素的class设置为menu，并添加以上CSS样式。

以上是防止在菜单切换时滑动页面的几种常见方法。根据具体需求和开发环境的不同，可以选择适合的方式来实现。腾讯云提供了丰富的云计算产品和解决方案，可以根据具体需求选择相应的产品进行开发和部署。详细的产品介绍和相关链接可以参考腾讯云官方网站：https://cloud.tencent.com/

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

微信小程序开发教程第六章：「我」的页面开发

微信小程序「我」的页面效果图与需求：用户有多张名片，需要左右切换查看，往下切换是菜单按钮。这里需求两处滑动，用到了微信提供给我们的滑动组件 swiper，并且进行了嵌套使用，第一层是名片展

04

iOS开发之常用资讯类App的分类展示与编辑的完整案例实现(Swift版)

上篇博客我们聊了《资讯类App常用分类控件的封装与实现(CollectionView+Swift3.0)》，今天的这篇博客就在上篇博客的基础上做些东西。做一个完整的资讯类App中的分类展示、分类切换、分类编辑这一套东西。当然，主要我们还是使用灵活多变的CollectionView来实现。下方我们将会给出程序的运行效果，然后给出核心的代码实现，在文章的末尾我们会给出github上源代码的分享链接。一、运行效果展示下方的GIF动图就是本篇博客所涉及Demo的运行效果了。首先我们点击第一个页面的“Show M

05

iOS开发常用之网络

表相关与的TabBar SWTableViewCell - 国内开源作者，带很多手势的表单元格。 MCSwipeTableViewCell - 带很多手势的表单元格。 TMQuiltView - 瀑布流。 XRWaterfallLayout - 超简单的瀑布流实现，实现说明。 WaterfallFlowDemo - 一个简单的UICollectionView瀑布流布局演示demo。 XLForm - 很多表格类的表，写法更高冷一点，推荐使用。 Eureka.swift - Eur

01

首页-底部Tab导航（菜单栏）的实现：FragmentTabHost+ViewPager+Fragment

Android开发中使用底部菜单栏的频次非常高，主要的实现手段有以下： - TabWidget - 隐藏TabWidget，使用RadioGroup和RadioButton - FragmentTabHost - 5.0以后的TabLayout - 最近推出的 Bottom navigation

02

Carson带你学Android：手把手教你优雅实现首页-底部Tab导航(菜单栏)

今天带大家来探索下如何用Fragment+FragmentTabHost++ViewPager实现底部菜单栏

03

不负青春，砥砺前行，VueAdminWork—2.0与您继续同行，众多实用功能等您而来

hello~各们小伙伴们大家好，好长时间没有和大家见面了，最近也是一直忙着进行各版本的更新迭代，加上工作比较忙，所以最近一段时间没有及时更新文章，还请大家多多理解。

02

原型设计软件Axure中文版，Axure如何下载？Axure软件安装教程

Axure是一款专业的交互式原型设计工具，旨在帮助用户快速制作高品质、高保真度的原型。若你是一个网站设计师或产品经理，那么Axure是你不可或缺的工具。在Axure中，你可以轻松的进行页面设计、交互效果制作、动画效果制作等等。

04

补一补产品基础知识：App各类导航设计适用场景及优劣势总结

最近在看一些产品文章时，总会看到一些词汇（例如：“tabbar”、“抽屉菜单”、“宫格菜单”），开始也不是很能理解，但是结合上下文还是能猜出一二的。之后去搜了一下相关资料，得知这原来属于App导航设计

06

SliferMenu详解

SlidingMenu简介: SlidingMenu的是一种比较新的设置界面或配置界面效果，在主界面左滑或者右滑出现设置界面，能方便的进行各种操作.目前有大量的应用都在使用这一效果。如Evernote、Google+、Foursquare等，国内的豌豆夹，人人，360手机助手等都使用SlidingMenu的界面方案。项目下载地址：https://github.com/jfeinstein10/SlidingMenu 注意： SlidingMenu依赖于另一个开源项目ActionBarSherlock，

05

Mac 常用快捷键与操作

Mac 电脑一般都不怎么用鼠标，因此其触摸屏有丰富的单指、双指、三指甚至四指的操作之外，再加上众多的快捷键，足以应对日常操作。

02

Android开发笔记（一百零一）滑出式菜单

滑出式菜单从界面上看，像极了一个水平滚动视图HorizontalScrollView，当然也可以使用HorizontalScrollView来实现侧滑菜单。不过今天博主要说的是利用线性布局LinearLayout来实现，而且是水平方向上的线性布局。可是LinearLayout作为水平展示时有点逗，因为如果下面有两个子视图的宽度都是match_parent，那么LinearLayout只会显示第一个子视图，第二个子视图却是怎么拉也死活显示不了。倘若在外侧加个HorizontalScrollView，由于HorizontalScrollView的宽度只能是wrap_content，因此子视图的宽度也只能是wrap_content而不能是match_parent了，故而HorizontalScrollView做不到子页面全屏的效果。现在我们既希望两个子视图的宽度是match_parent，又希望能够拖动两个子视图，还有没有办法呢？办法肯定是有的，在《Android开发笔记（三十五）页面布局视图》中，我们提到margin和padding都可用来设置空隙，空隙的数值都是正数，其实空隙值也能是负数，负数表示该视图被隐藏了一部分，仿佛一张纸插了部分纸面到书中，于是只有一部分露了出来。具体到LinearLayout的编码实现，对应的便是LinearLayout.LayoutParams的leftMargin参数，若该参数为正数，则视图页面拉出了一段空白；若该参数为负数，则视图页面隐藏了一段内容；若该参数是该视图宽度的赋值，则表示视图页面完全隐藏了起来，跟visible="gone"的效果类似。所以我们可以给视图添加触摸监听器OnTouchListener，在触摸坐标发生变化的同时，给菜单子页面隐入隐出对应的宽度，从而达到抽屉式拉出菜单的效果。一旦触摸弹起，根据手势滑动的距离，判断当前是要拉出整个菜单，还是缩回才拉出一部分的菜单。这个判断可按照滑动偏移是否达到屏幕一半宽度的条件，至于自动拉出或者自动缩进的动画，可由Runnable来定时刷新视图的leftMargin参数。下面是一个简单侧滑的效果截图：

07

高仿今日头条

高仿今日头条 --- 第一篇：（android高仿系列）今日头条 --新闻阅读器（一）上次，已经完成了头部新闻分类栏目的拖动效果。这篇文章是继续去完善APP 今日头条这个新闻阅读器的其他功能。这次所实现的功能清单： 1.通过SlidingMenu实现左右侧拉菜单效果 2.通过重写CompoundButton实现--昼夜模式切换按钮效果。 3.通过PopupWindow控件实现了列表中更多菜单弹框操作效果。 4.通过universal-image-loader库实现了图片的加载和缓存。 5.通

09

【原型设计】如何利用Axure实现下拉子菜单？

Axure RP是一款专业的快速原型设计工具，让我们能够快速设计并创建出应用软件或Web页面的具备高保真和交互能力的原型。通过原型设计，不但能更好地与客户进行交流确认，也能明确地给开发人员以成品效果作为开发指导。本文介绍如何透过这款工具实现下拉子菜单功能的原型设计。

02

Ios常用第三方框架（二）

图表 PNChart - 国内开源作者，动态的图表。 swift-linechart - 功能完整、实用的折线图组件。使用方便，参数配置简单。是不可多得的优质组件--swift。 ios-charts - 一款优秀 Android 图表开源库 MPAndroidChart 的 Swift 语言实现版（支持 Objective-C 和 Swift 调用）。缺省提供的示例代码为 Objective-C。 TEAChart - xhacker/TEAChart 一个简洁的 iOS 图表库，支持柱状图、饼图

06

把笔记本触摸板用起来

大部分的笔记本用户对于触摸板都是当作没有鼠标时的一个替代品，但是现在的windows触摸板內置了不少的快捷功能，比自己去鼠标找然后点击效率会高一点，如果没有外接键盘，双手随便可以触碰的到的话，使用触摸板会把体验提升一个档次

04

安卓Chrome使用技巧合辑

文章更新: 　　20160921 初次成文　　20170424 大幅修正:删除了失效的实验室特性，并增加了Chrome Canary专用特性　　20170514 增加了"姊妹篇(GIF Version)" 写在前面: 　　Android端的Chrome相对于我们熟知的国产浏览器而言，看起来似乎不那么"易用"，但是Chrome作为"大公司"的"大产品"，在提升用户体验这一点上还是下了很多功夫的，只不过这些改变可能不那么容易被用户发现。所以即使你是一个使用Chrome长达几年的老用户，有

03

iOS开发UI篇--一个侧滑菜单SlidingMenu

侧滑菜单已经成为app一个极常用的设计，不管是事务类，效率类还是生活类app。侧滑菜单因Path 2.0和Facebook为开发者熟知，国内目前也有很多流行app用到了侧滑菜单，比如QQ、网易邮箱、知乎等等。 IOS官方并没有提供类似于侧滑栏之类的组件，所以我们需要自己写一个侧滑栏控件，为了不要重复造轮子，我在github上找到了一个使用简单方便，新手容易入手的侧滑菜单控件，Demo下载地址：这是一个我的iOS交流群：624212887，群文件自行下载，不管你是小白还是大牛热烈欢迎进群，分享面试经验，讨论技术，大家一起交流学习成长！希望帮助开发者少走弯路。

02

Mac下提升工作效率的方式

Mac 系统一向以提供高效的工作环境著称，iOS、Android和服务端程序员都可以轻松的在Mac上搭建舒适的开发环境。笔者主要从事iOS开发，一般在macbook上工作，以下是这些年累积下来的一些提升工作效率的方式，和大家分享。

03

树莓派使用Android系统

这篇文章详细记录了下怎么在树莓派上安装安卓系统，使用了LineageOS版本的Android。

02

[WordPress主题]2019大前端dux6.0最新无限制版

DUX主题是基于WordPress程序的主题，由themebetter团队原创开发，是目前比较火的wordpress主题，和大前端主题一样比较优秀的主题还有begin知更鸟，两者功能都很多，界面也比较好看，做一个个人博客完全够用了，今天爱游分享就是大前端5.2主题，已去除域名限制。

05

Flutter | 容器组件

EdgeInsetsGeometry 是一个抽象类，开发中，我们一般都使用 EdgeInsets 类，他是 EdgeInsetsGeometry 的子类，定义了一下设置填充的方法

01

交互式原型设计Axure软件中文激活版，Axure软件2023安装教程下载

Axure软件是一款可以帮助用户快速设计网站、移动应用和其他交互性产品的工具。它能够帮助用户创建高质量的原型、模拟交互，以及测试用户体验。Axure具有丰富的功能，包括页面创建、元素编辑、交互设计、状态管理、表单设计、导航设计、动画特效等。使用Axure，用户可以轻松地设计出具有交互性的产品页面，并且可以通过预览或测试来检查设计的效果。

02

『Demo』你想开发的页面特效第二期~

这期极乐大叔继续将小程序内各种页面效果实现方法聚合了一下，以便大家能够迅速而方便的使用。图表类（折线图，统计图）图表类：折线图，柱状图，K线，分时图生成二维码微信小程序条形码、二维码生成模块微信小程序实用Demo: 小程序内生成image格式qrcode（二维码）微信小程序使用canvas进行二维码绘制会员小程序开发总结：条形码二维码图片预加载在微信小程序里实现图片预加载组件让人头痛的小程序之『图片懒加载』终极解决方案多级联动微信小程序省市三级联动微信小程序实用组件：自定义toas

09

一个Mac系统，能让程序员编程效率提升30%

Mac 系统一向以提供高效的工作环境著称，iOS、Android和服务端程序员都可以轻松的在Mac上搭建舒适的开发环境。

02

后台管理tab栏滑动解决方案

后台管理系统中比较常见的布局是左边菜单栏，右边tab切换栏，但是一般的tab组件不包含tab页过多的切换问题的，所以需要个性化实现，本文的实现方案是滑动鼠标滚轮绑定tab达到切换的效果，先上一个动态图看下效果

03

【 FlutterUnit 食用指南】开源篇

零、前言 FlutterUnit终于和大家见面了，这将是【张风捷特烈】长期维护的一个项目欢迎star : github.com/toly1994328… 可以在github 仓库里下载apk

02

微信小程序-自定义菜单导航（实现楼梯效果）

在开发页面时，往往需要实现，点击页面的导航菜单页面滚动到相应位置，滚动页面实现菜单选项的高亮。在html开发中，我们可以用到a标签锚点实现，jq的动画相结合实现类似效果。在框架中vant UI框架也为我们实现了这一效果。

02

微信小程序函数处理之保姆级讲解

在使用Page（）构造器注册页面时，需要使用生命周期函数，包括onLoad（）页面加载时生命周期函数、onShow（）页面显示时生命周期函数、onReady（）页面初次渲染完成时生命周期函数、onHide（）页面隐藏生命周期函数和onUnload（）页面卸载生命周期函数。

03

微信小程序实战开发教程-抽屉菜单

抽屉菜单是app上常见的菜单设计方式，典型的抽屉菜单如下图所示下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示：页面包含一个主页和抽屉菜单页，为了实现滑动效果，页面采用absolute

07

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

04

appium+python自动化56-微信小程序自动化

最近微信的小程序越来越多了，随之带来的问题是：小程序如何做自动化测试？本篇以摩拜小程序为例，介绍如何定位小程序里面的元素

01

导航栏还是侧栏？flutter 跨平台适配指南

在开发跨平台应用时，设计良好的导航栏和侧栏是至关重要的考虑因素。这两个组件在应用中扮演着关键的角色，直接影响用户对应用的导航和使用体验。

01

像 QQ 一样处理滑动冲突

在项目中，如果要用到滑动控件嵌套滑动控件，总会让人很心塞。因为很可能会出现冲突的问题。这里举个例子，利用事件分发机制，处理侧滑菜单控件和列表中的侧滑删除控件间的冲突。

01

开发 | 小程序不够「高级」？那是因为你没用上这 3 个特效！

最近在负责一个微信小程序的前端以及前后端接口的对接的项目，整体上所有页面的布局我都已经搭建完成。

03

构建赢得用户尊重的移动用户体验

今天，一些设计师习惯于吹虚他们的app多么好用，多么高效甚至用户多么离不开它们，似乎这些特点就是他们设计的目标，但是我想推荐一个针对移动用户体验更为感性的目标：赢得用户的尊重。为了做到这一点，我们必须围绕“故事”来构建移动用户体验。移动用户体验并不是发生在手机端或者平板端，而是发生在某个时刻，某个地点，在此时此刻用户产生了某种特殊的需求或面对着某个问题，而你的移动产品能解决这些问题或者满足这些需求。通过改变“故事”的产出物，移动用户体验与用户之间建立起一种联系，从最初的惊喜到后来的信任，最终变成一种

Flutter 全栈式——页面框架

对于没有相关基础的人，在正式学习App的UI之前，建议先了解Material Design相关的知识

03

【Flutter】侧拉导航栏实现 ( Drawer 组件 | PageView 组件 )

Scaffold 组件中的 drawer 参数 , 就是设置侧拉导航栏菜单的 , 为其赋值一个 Drawer 组件 ;

02

SlidingMenu使用详解

SlidingMenu 是什么 SlidingMenu 是一个强大的侧边栏导航框架，并且已经被一些比较牛的 App 使用 SlidingMenu 的主要特点 (1) 侧边栏可以是一个Layout，包含任何 View，也可以是一个 Fragment (2) 使用简单方便，支持左滑和右滑等 (3) 自定义侧边栏显示动画 SlidingMenu 常用属性介绍: menu.setMode(SlidingMenu.LEFT);//设置左滑菜单 menu.setTouchModeAbove(SlidingMen

03

Material Design — 底部导航（Bottom Navigation）

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

09

Android开源框架的SlidingFragment的使用示例

其中BaseFragment.java是另外5个Fragment的基类，代码如下：

01

创造引人入胜的网页体验：掌握 CSS 动画

在现代网页设计中，动画是一个强大的工具，可以为您的网页增添生气和互动性。它不仅可以吸引用户的注意力，还可以提升用户体验并传达信息。而 CSS 动画正是实现这一目标的关键。本文将深入探讨 CSS 动画，让您掌握它的精髓，为您的网页创造引人入胜的用户体验。

05

ONLYOFFICE 桌面编辑器 8.1 强势来袭：解锁全新PDF编辑、幻灯片优化与本地化体验，立即下载！AI

详细介绍使用视频链接：ONLYOFFICE 文档8.1新功能简介：功能全面的 PDF 编辑器、幻灯片版式、改进从右至左显示、优化电子表格的协作等等_哔哩哔哩_bilibili

01

如何在Hue中添加Spark Notebook

CDH集群中可以使用Hue访问Hive、Impala、HBase、Solr等，在Hue3.8版本后也提供了Notebook组件（支持R、Scala及python语言），但在CDH中Hue默认是没有启用Spark的Notebook，使用Notebook运行Spark代码则依赖Livy服务。在前面Fayson也介绍了《Livy，基于Apache Spark的开源REST服务，加入Cloudera Labs》、《如何编译Livy并在非Kerberos环境的CDH集群中安装》、《如何通过Livy的RESTful API接口向非Kerberos环境的CDH集群提交作业》、《如何在Kerberos环境的CDH集群部署Livy》、《如何通过Livy的RESTful API接口向Kerberos环境的CDH集群提交作业》、《如何打包Livy和Zeppelin的Parcel包》和《如何在CM中使用Parcel包部署Livy及验证》，本篇文章Fayson主要介绍如何在Hue中添加Notebook组件并集成Spark。

03

导航设计的10种模式

导航设计的目的就是需要突出产品的核心，扁平化用户的任务路径。让用户能够顺利的在产品中畅行，让用户时刻清楚自己在应用中所处的位置，及如何前往目的页面。

04

android顶部导航条

今天给大家介绍在Android中实现顶部导航菜单左右滑动效果的二种解决方案。　　第一种解决方案：　　在以前的一篇博文中我使用android-support-v4.jar实现了左右滑动指引效果，有兴趣的朋友可以查看：http://www.cnblogs.com/hanyonglu/archive/2012/04/07/2435589.html 　　那么今天第一个示例我仍然使android-support-v4.jar来实现菜单左右滑动效果，关于这个包的信息，不再详述，大家可以查看官方文档。

05

微信 iOS 版更新：表情包选择栏大变样，小程序更像一个 App 了

【本文授权转载自小程序报道第一媒体知晓程序（微信号 zxcx0101）。关注「知晓程序」，让你更知小程序。】 9 月 17 日，期待已久的微信 7.0.7 for iOS 正式版上线了。与一周前更新的微信 7.0.7 for Android 内测版相似，此次更新并没有新功能上线，更多是一些细节上的改变。或许是为了与 Android 版本号同步，iOS 版微信的更新跳过了 7.0.6 版本号，从 7.0.5 直接来到了 7.0.7。为了帮助大家更好地了解此次更新情况，我们将微信 7.0.7 for

02

《移动互联网技术》第十一章 Android应用工程案例: 掌握Android系统的需求分析和设计以及 Android项目的程序测试和版本管理方法

《移动互联网技术》课程是软件工程、电子信息等专业的专业课，主要介绍移动互联网系统及应用开发技术。课程内容主要包括移动互联网概述、无线网络技术、无线定位技术、Android应用开发和移动应用项目实践等五个部分。移动互联网概述主要介绍移动互联网的概况和发展，以及移动计算的特点。无线网络技术部分主要介绍移动通信网络（包括2G/3G/4G/5G技术）、无线传感器网络、Ad hoc网络、各种移动通信协议，以及移动IP技术。无线定位技术部分主要介绍无线定位的基本原理、定位方法、定位业务、数据采集等相关技术。Android应用开发部分主要介绍移动应用的开发环境、应用开发框架和各种功能组件以及常用的开发工具。移动应用项目实践部分主要介绍移动应用开发过程、移动应用客户端开发、以及应用开发实例。课程的教学培养目标如下： 1．培养学生综合运用多门课程知识以解决工程领域问题的能力，能够理解各种移动通信方法，完成移动定位算法的设计。 2．培养学生移动应用编程能力，能够编写Andorid应用的主要功能模块，并掌握移动应用的开发流程。 3. 培养工程实践能力和创新能力。　通过本课程的学习应达到以下目的： 1．掌握移动互联网的基本概念和原理； 2．掌握移动应用系统的设计原则； 3．掌握Android应用软件的基本编程方法； 4．能正确使用常用的移动应用开发工具和测试工具。

01

「大众点评点餐」小程序开发经验 03：事件联动

李超，美团点评前端开发工程师，2 年 web 开发经验，现在是美团点评点餐团队的一员。

04

实现滑动菜单

新建一个空项目，修改主布局文件如下，DrawerLayout中放置了两个直接子控件，第一个字控件是FrameLayout，用于作为主屏幕中显示的内容，第二个控件这里使用了一个TextView，用于作为滑动菜单中显示的内容:

02

【UniApp】-uni-app-内置组件

然后在配置一下，微信小程序的 AppId，直接去之前的项目中拷贝一下即可，找到之前项目的 manifest.json 文件，然后选择微信小程序配置，复制一下即可：

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭