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

最新推荐文章于 2022-08-08 12:03:09 发布
最新推荐文章于 2022-08-08 12:03:09 发布
阅读量776 收藏
点赞数 1
分类专栏： uniapp 文章标签： javascript typescript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CQWNB/article/details/108372269
版权

在这里插入图片描述

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

源码

在这里插入图片描述

catchtouchmove='true'

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

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

C Q W
关注
专栏目录
uniapp实现页面左右滑动，上下滑动事件
a_靖的博客
04-12 7294
实现代码： <view class="" @touchstart="touchstart" @touchend="touchend"> </view> data() { return { touchData: {}, //滑动事件数据 } } methods: { touchstart(e) { this.touchData.clientX = e.changedTouches[0].clientX; this.touchData.client
微信小程序使用colorUI框架
F_mengze的博客
07-03 2382
使用colorUI框架，首先我们需要下载下来 下载地址： GitHub地址：https://github.com/weilanwl/ColorUI/ 下载下来解压我们会得到如下文件 我们把demo文件夹导入到我们的微信开发者工具中： template文件夹是一个使用colorUI的（相当于）新建小程序里边可以直接使用colorUI，如果你是自己创建的项目，将我们demo中的colorui文件夹复制到项目中，跟pages同级 然后在app.wxss导入 这样我们就可以使用colorui了 将你需要的组
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 或扫描二维码。
用colorUi的modal模块在里面加入input的时候ios下输入框不显示原因
wj859548的博客
02-18 673
用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 文档
qq_41416296的博客
08-08 1211
color ui 文档
uni-app-开发碰到的各种问题(1)
weixin_42367621的博客
10-16 514
问题描述： 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 3046
之前已经简单介绍过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仿抖音滑动视频
07-15
uniapp仿抖音
uniapp实现可滑动选项卡
01-18
本文实例为大家分享了uniapp实现可滑动选项卡的具体代码，供大家参考，具体内容如下 tabControl-tag.vue <view class=tabList :style=isEquall
小程序组件库ColorUI的使用，一键复制粘贴
祈澈菇凉
06-30 1038
在开发uniapp的时候，最佳的ui框架就是ColorUI，ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！ 颜值很高，注重颜值的程序员，可以选择考虑一下哦。 github地址： https://github.com/weilanwl/ColorUI 在色彩设计上，都是非常的好看，非常的丰富的。 今天在做小程序 的时...
1、使用colorui制作小程序滚动广告栏
weixin_46841213的博客
04-16 1362
使用colorui制作小程序滚动广告栏 我们可以使用colorui组件开发小程序，能够很容易的写出广告栏。 <template> <view> <view class="cu-bar margin-top"> <view class="action"> <text class="announce text-white">公告</text>
微信小程序之自定义模态框
weidong_y的博客
04-23 2572
此文章已经同步更新到个人博客上，喜欢有侧边栏目录的同学，可以点击下面的链接跳转到个人博客上读阅噢。 个人博客地址： 为什么要自定义模态框？ 因为官方提供的模态框缺乏灵活性，无法满足每个人的需求，所以我们可以根据自己的实际需求来实现自定义模态框。 效果图 实现思路 通过一个蒙层+自定义的弹窗来实现上图的效果，而弹窗的消失与出现则通过一个状态值来控制即可。 界面代码 index.wxml ...
ColorUI高颜值组件库，传授使用速成的方法和快速脱坑的技巧，顺便填坑
qq_40982347的博客
08-13 8447
ColorUI速成 简单介绍 ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！这个组件以高颜值而得到推广，深受开发者的喜爱，由作者文晓港创作，目前仅更新到2.0版本。 GitHub资源地址：https://github.com/weilanwl/ColorUI 优势 一：组件精美，可以说每一个都制作精良，作者很用心，UI功底很扎...
uni组件ColorUI手册
梦工厂
06-15 1940
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
7 个热门又优质的小程序 UI 组件库，社区、电商、工具各类都有！
HJSJR的博客
08-06 2345
如果你也是一名小程序开发者，当你打开一个高颜值的小程序时，是不是很想知道「这用的是哪一套 UI 组件库」呢？ 目前，网上已有不少开源的小程序组件库，但选择太多往往让人挑花了眼，反而不知哪一款才适合自己。今天，知晓君跟大家分享 7 款比较好用的组件库，如果你想开发，或是正在开发小程序，不妨了解一下，对比它们之间的长短与异同。 WeUI WeUI 是微信官方出品的组件库，它沿用了微信的视觉设计与...
uni-app 遮罩层事件穿透解决办法catchtouchmove
qq_49438920的博客
11-06 7181
前言： 最近在做遮罩层相关的组件时，发现出现遮罩层后，其比遮罩层层级低的其他组件依然能滑动滚动，这就很无语。后面我尝试通过各种布尔值试图阻断这种情况，后面越做越复杂，逻辑越做越乱。再后来发现了一个专门解决这个问题的封装属性，即直接在需要防止事件穿透的组件标签上加上 :catchtouchmove="true" 后面即可轻松完美解决 ...
模态窗口
诠释完美
08-27 3789
一. 简介 1. 简介 由于在iOS中并没有专门的模态窗口类，模态窗口(modal)在iOS中只是视图控制器显示的一种方式，模态窗口方便快捷，它不依赖于控制器容器(如UITabBarController和UINavigationController)，通常用于显示独立的内容，在模态窗口显示的时候，它暂时中断程序正常的执行流程，用户无法再与上一个场景交互，只能对当前此窗口进行操作，除非他们先
uniapp swiper-item 禁止滑动的方法
最新发布
07-23
要禁止 Uniapp 中 Swiper 组件中的 swiper-item 滑动，你可以使用以下方法： 1. 使用 v-bind:disabled.sync 属性：将 swiper-item 组件的 disabled 属性绑定到一个变量，并将该变量设置为 true 来禁用滑动。示例...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值