uniapp使用ColorUI禁止模态框底层滑动

最新推荐文章于 2025-09-19 17:52:34 发布
原创 最新推荐文章于 2025-09-19 17:52:34 发布 · 874 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #typescript #前端

本文介绍如何在uniapp中使用ColorUI组件库禁止模态框底部页面的滑动。只需在模态框中添加catchtouchmove='true'属性，此设置在HBuilderX编辑器的预览和真机测试中有效，但在电脑本地环境下无效。注意，该功能在开发工具的模拟器上可能无法显示效果，需通过真机调试验证。

在这里插入图片描述

uniapp使用ColorUI禁止模态框底层滑动

源码

在这里插入图片描述

catchtouchmove='true'

在模态框加入catchtouchmove='true’即可，使用HBuilderX编辑器的预览和真机测试是可以。在电脑本地是没有效果的啦，这个要注意。

注意：开发工具的模拟器上没有效果，必须真机调试或者预览才有效果

uniapp swiper禁止左右滑动
树上骑个猴的博客
02-17 6954
给swiper-item绑定catchtouchmove事件 <swiper class="swiper-group" :current="swiperCurrent"> <swiper-item catchtouchmove="stopChange"v-for="(item, index) in tabsArr" :key="index"> methods: { // 截获竖向滑动 catchTouchMove(res){
uniapp接入腾讯滑动行为验证码（App、小程序、H5）
09-09
Uniapp是一种使用Vue.js开发所有前端应用的框架，能够编译到iOS、Android、Web（包括微信小程序）等多个平台。它允许开发者编写一次代码，然后发布到多个平台，极大地提高了开发效率。然而，在为不同平台构建应用时...
用colorUi的modal模块在里面加入input的时候ios下输入框不显示原因
wj859548的博客
02-18 743
用colorUi的modal模块在里面加入input的时候ios下输入框不显示原因 在这里插入代码片 <view class="cu-modal {{modalName=='Modal'?'show':''}}" > <view class="cu-dialog diaLogstyle" style="vertical-align: sub;"> </view> </view> 在这里 cu-dialog diaLogs
微信小程序使用colorUI框架
F_mengze的博客
07-03 2502
使用colorUI框架，首先我们需要下载下来 下载地址： GitHub地址：https://github.com/weilanwl/ColorUI/ 下载下来解压我们会得到如下文件 我们把demo文件夹导入到我们的微信开发者工具中： template文件夹是一个使用colorUI的（相当于）新建小程序里边可以直接使用colorUI，如果你是自己创建的项目，将我们demo中的colorui文件夹复制到项目中，跟pages同级 然后在app.wxss导入 这样我们就可以使用colorui了 将你需要的组
uniapp u-popup弹窗展示时禁止底部内容滚动，禁止滑动遮罩层滚动
最新发布
PrimaryColor
09-19 445
【代码】uniapp u-popup弹窗展示时禁止底部内容滚动，禁止滑动遮罩层滚动。
colorui 文档
qq_41416296的博客
08-08 1489
color ui 文档
uni-app-开发碰到的各种问题(1)
weixin_42367621的博客
10-16 604
问题描述： 1.uni-app原生组件textarea出现安卓输入文字时，点击弹窗看到输入文字层级比弹窗高 2.input原生组件placehoder在安卓上出现重叠现象 代码： <view class="box-input-bottom"> <textarea maxlength="100" class="area-text" v-show="androidFlag" rows="6" placeholder="请输入" @.
uni-app禁止点击_5分钟极速入门uniapp
weixin_39745933的博客
10-21 3106
之前已经简单介绍过uni-app的强大跨端能力，So，今天来带大家5分钟快速入门uni-app。本篇为基础教程，涉及如运行原理、源码解析、APP开发、uniCloud(Serverless)、NVUE，见后续更新。准备工作 需要具备的知识因为uni-app使用的DSL是Vue，所以最好先学习下Vue基础知识和Vue相关技术栈。不熟悉Vue基础知识的同学可以去官方文档学习一下：https:...
精选资源
uniapp 仿抖音上下滑动视频.zip
03-12
【uniapp 仿抖音上下滑动视频】 在移动应用开发领域，uniapp是一个备受瞩目的框架，它允许开发者使用一种语言编写代码，然后跨多个平台（包括iOS、Android、H5以及小程序）进行部署。本项目是基于uniapp实现的一个...
精选资源
uniapp滑动周组件
07-08
uniapp滑动周组件
精选资源
uniapp微信隐私保护弹出框 隐私协议弹出框
09-10
【uniapp微信隐私保护弹出框 隐私协议弹出框】 在当前的互联网环境中，用户隐私保护已经成为了一个至关重要的议题，特别是在移动端应用开发中。微信作为中国最大的社交平台，其开发工具微信开发者工具（WeChat ...
ColorUI-小程序原生高颜值组件库--ColorUI组件库.zip
09-23
简介hi!开发者！ColorUI迎来了2.0的升级，相比之前的版本，2.0版本重构了基础代码，增加了更多的配色，这是一个全新的小程序UI解决方案。ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！项目为个人开源项目，如果项目有帮到你，希望能支持下开发者。使用下载源码包可得到 Demo 和 Template 两个项目， Demo 包含所有组件源码。 Template 是一个已经引用了ColorUI的空白模板。Demo 即文档。在线文档 编写中...交流微信群：加入微信群请先添加开发者微信，备注GitHub。QQ群：240787041 或扫描二维码。
uni组件ColorUI手册
梦工厂
06-15 2208
ColorUI手册文字颜色样式布局按钮标签阴影模态框轮播图导航栏表单辅助样式 本文根据ColorUI使用文档修改 本文仅用于个人学习记录整理 文字 使用 <view class="text-xsl">特大</view> 样式 .text-xs {font-size: 20rpx;} .text-sm {font-size: 24rpx;} .text-df {font-size: 28rpx;} .text-lg {font-size: 32rpx;} .text-xl {fo
小程序组件库ColorUI的使用，一键复制粘贴
祈澈菇凉
06-30 1165
在开发uniapp的时候，最佳的ui框架就是ColorUI，ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！ 颜值很高，注重颜值的程序员，可以选择考虑一下哦。 github地址： https://github.com/weilanwl/ColorUI 在色彩设计上，都是非常的好看，非常的丰富的。 今天在做小程序 的时...
1、使用colorui制作小程序滚动广告栏
weixin_46841213的博客
04-16 1486
使用colorui制作小程序滚动广告栏 我们可以使用colorui组件开发小程序，能够很容易的写出广告栏。 <template> <view> <view class="cu-bar margin-top"> <view class="action"> <text class="announce text-white">公告</text>
微信小程序之自定义模态框
weidong_y的博客
04-23 2644
此文章已经同步更新到个人博客上，喜欢有侧边栏目录的同学，可以点击下面的链接跳转到个人博客上读阅噢。 个人博客地址： 为什么要自定义模态框？ 因为官方提供的模态框缺乏灵活性，无法满足每个人的需求，所以我们可以根据自己的实际需求来实现自定义模态框。 效果图 实现思路 通过一个蒙层+自定义的弹窗来实现上图的效果，而弹窗的消失与出现则通过一个状态值来控制即可。 界面代码 index.wxml ...
ColorUI高颜值组件库，传授使用速成的方法和快速脱坑的技巧，顺便填坑
qq_40982347的博客
08-13 8765
ColorUI速成 简单介绍 ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！这个组件以高颜值而得到推广，深受开发者的喜爱，由作者文晓港创作，目前仅更新到2.0版本。 GitHub资源地址：https://github.com/weilanwl/ColorUI 优势 一：组件精美，可以说每一个都制作精良，作者很用心，UI功底很扎...
Modal(模态框)滚动条不能自动滚动到底部问题
qq_21166791的博客
04-27 1635
用的是bootstrap 的模态框，在modal-body 中构建了一个 ul 标签，id为contentUL ;可局部滚动， 要求：代开modal后自动滚动至最下方 用 $().modal("show")显示modal后，document.getElementById("contentUl").scrollHeight 的高度为0； 但是监听是可以获取到高度的（必须得滚动触发一下） $...
uni-app 遮罩层事件穿透解决办法catchtouchmove
qq_49438920的博客
11-06 7772
前言： 最近在做遮罩层相关的组件时，发现出现遮罩层后，其比遮罩层层级低的其他组件依然能滑动滚动，这就很无语。后面我尝试通过各种布尔值试图阻断这种情况，后面越做越复杂，逻辑越做越乱。再后来发现了一个专门解决这个问题的封装属性，即直接在需要防止事件穿透的组件标签上加上 :catchtouchmove="true" 后面即可轻松完美解决 ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值