uview 组件遇到的问题以及响应的改造

uview组件版本 2.0.36

u-action-sheet 选项太多,占满屏幕,设置滚动

问题描述: u-action-sheet组件绑定的选项过多的时候,会充满全屏

解决方案: 设置滚动

  1. 找到文件 /uni_modules/uview-ui/components/u-action-sheet/u-action-sheet.vue
  2. 找到 u-action-sheet__item-wrap 的类名(注意搜索时要精确匹配类名)
    <view class="u-action-sheet__item-wrap">
  3. 修改成
    <scroll-view class="u-action-sheet__item-wrap" scroll-y style="min-height: 100rpx;max-height: 700rpx;">
  4. 标签结尾的 </view> 也要替换成 </scroll-view>
  5. 可以重启项目看下!

替换的代码大致在 u-aciton-sheet.vue 组件的 35行左右,替换部分的代码大致如下:

			<slot><u-line v-if="description"></u-line><scroll-view class="u-action-sheet__item-wrap" scroll-y style="min-height: 100rpx;max-height: 700rpx;"><!-- <view class="u-action-sheet__item-wrap"> --><template v-for="(item, index) in actions"><!-- #ifdef MP --><button:key="index"class="u-reset-button":openType="item.openType"@getuserinfo="onGetUserInfo"@contact="onContact"@getphonenumber="onGetPhoneNumber"@error="onError"@launchapp="onLaunchApp"@opensetting="onOpenSetting":lang="lang":session-from="sessionFrom":send-message-title="sendMessageTitle":send-message-path="sendMessagePath":send-message-img="sendMessageImg":show-message-card="showMessageCard":app-parameter="appParameter"@tap="selectHandler(index)":hover-class="!item.disabled && !item.loading ? 'u-action-sheet--hover' : ''"><!-- #endif --><viewclass="u-action-sheet__item-wrap__item"@tap.stop="selectHandler(index)":hover-class="!item.disabled && !item.loading ? 'u-action-sheet--hover' : ''":hover-stay-time="150"><template v-if="!item.loading"><textclass="u-action-sheet__item-wrap__item__name":style="[itemStyle(index)]">{{ item.name }}</text><textv-if="item.subname"class="u-action-sheet__item-wrap__item__subname">{{ item.subname }}</text></template><u-loading-iconv-elsecustom-class="van-action-sheet__loading"size="18"mode="circle"/></view><!-- #ifdef MP --></button><!-- #endif --><u-line v-if="index !== actions.length - 1"></u-line></template><!-- </view> --></scroll-view></slot>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/56958.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

git分支模型

定义分支 长期分支 指长期存在的分支&#xff0c;也叫固定分支 developmaster 短期分支 短分支没有固定的分支名。但是有分支名规范 feature分支hotfix分支 分支模型 暂时无法在文档外展示此内容 参考 分支的目的是隔离&#xff0c;但多一个分支也意味着维护成本的增加。…

NFT Insider #152:The Sandbox Alpha 第4季开启

市场数据 加密艺术及收藏品新闻 Realm of Historia 推出首个以古老文化遗址为主题的 NFT 系列 专注于文化遗产保护的区块链平台 Realm of Historia 正通过推出首个 NFT 系列扩大其全球影响力。该系列以亚美尼亚的古代遗址 Carahunge 为主题&#xff0c;这一遗址已有 7500 多年…

ES6新增特性

ES6又称ECMAScript6、ECMAScript2015 新特性&#xff1a; 1. 块级作用域&#xff1a;let const &#xff0c;不会有变量提示、块级作用域的内容、不能在同一个作用域重复声明 2. Promise&#xff1a;解决了回调地狱 3. 箭头函数&#xff1a; 4. 定义类语法糖&#xff1a;C…

EDM邮件营销,如何确保高频率发送不触发限制

EDM邮件营销需选对平台&#xff0c;遵守反垃圾邮件法规&#xff0c;高效管理邮件列表&#xff0c;合理制定发送频率&#xff0c;优化内容与设计&#xff0c;用智能化工具测试与优化&#xff0c;监控送达和反馈&#xff0c;维持良好ISP关系&#xff0c;确保高效安全发送不封号。…

MATLAB中head函数用法

目录 语法 说明 示例 显示矩阵的前八行 显示表的前三行 返回表的前八行 head函数的功能是获取数组或表的顶行。 语法 head(A) head(A,k) B head(___) 说明 head(A) 在命令行窗口中显示数组、表或时间表 A 的前八行&#xff0c;但不存储值。 head(A,k) 显示 A 的前 k …

13.3寸三防平板大尺寸+高速运行提升工业软件操作体验

在工业领域&#xff0c;移动设备的应用日益广泛&#xff0c;其性能直接影响着工作效率和数据安全。传统的工业平板电脑常常面临着屏幕尺寸过小、运行速度缓慢、以及抗环境能力不足等问题&#xff0c;这些都制约了工业软件的流畅运行和高效应用。而一款搭载先进硬件配置的13.3寸…

线性代数基础02_矩阵(下)向量

目录 一、矩阵&#xff08;下&#xff09; 1、伴随矩阵 2、逆矩阵 3、初等变换 4、矩阵的标准形 4.1行阶梯形矩阵 4.2简化行阶梯型矩阵 二、向量 1、定义 2、向量的运算 3、矩阵的特征值和特征向量 4、向量的模 5、向量的内积 一、矩阵&#xff08;下&#xff09;…

动态规划-子数组系列——乘积最大子数组

1.题目解析 题目来源&#xff1a;152.乘积最大子数组——力扣 测试用例 2.算法原理 1.状态表示 由于题目给的数组中可以包含负数&#xff0c;因此求最大乘积有两种情况&#xff1a; a.负数乘以最小数得出最大乘积 b.整数乘以最大数得出最大乘积 所以需要两个表分别求出最大最…

Ajax(web笔记)

文章目录 1.Ajax的概念2.Ajax 的作用3.原生Ajax4.Axios4.1Axios的概念4.2Axios入门 1.Ajax的概念 AsynchronousJavaScriptAndXML&#xff0c;异步的JavaScript和XML 2.Ajax 的作用 数据交换:过Ajax可以给服务器发送请求&#xff0c;并获取服务器响应的数据。异步交互:可以在…

R语言医学数据分析实践-R编程环境的搭建

【图书推荐】《R语言医学数据分析实践》-CSDN博客 《R语言医学数据分析实践 李丹 宋立桓 蔡伟祺 清华大学出版社9787302673484》【摘要 书评 试读】- 京东图书 (jd.com) R语言编程_夏天又到了的博客-CSDN博客 R语言对编程环境的要求不高&#xff0c;可以在多种操作系统平台上…

找寻孤独伤感视频素材的热门资源网站推荐

在抖音上&#xff0c;伤感视频总是能够引起观众的共鸣&#xff0c;很多朋友都在寻找可以下载伤感视频素材的地方。作为一名资深的视频剪辑师&#xff0c;今天我来分享几个提供高清无水印伤感素材的网站&#xff0c;如果你也在苦苦寻找这些素材&#xff0c;不妨看看以下推荐&…

【软件运行类文档】项目试运行方案,试运行计划书(word原件)

一、 试运行目的 &#xff08;一&#xff09; 系统功能、性能与稳定性考核 &#xff08;二&#xff09; 系统在各种环境和工况条件下的工作稳定性和可靠性 &#xff08;三&#xff09; 检验系统实际应用效果和应用功能的完善 &#xff08;四&#xff09; 健全系统运行管理体制&…

RabbitMQ进阶_延迟消息

文章目录 一、 死信交换机和延迟消息1.1、 死信交换机1.2、 延迟消息 二、 DelayExchange插件三、 实现时的优化 在电商的支付业务中&#xff0c;对于一些库存有限的商品&#xff0c;为了更好的用户体验&#xff0c;通常都会在用户下单时立刻扣减商品库存。例如电影院购票、高铁…

解决calico 报错: error getting IP from IPAM: resource already exists

问题描述&#xff1a; Pod启动&#xff0c;一直creating状态&#xff0c;describe显示 error getting IP from IPAM: resource already exists&#xff0c;分配的IP地址被占用。 解决办法 这个IP真的被占用了&#xff0c;可以用 kubectl get po -A -owide | grep <ip>…

How to install Node.js and NPM on CentOS

How to install Node.js and NPM on CentOS Download Node.js 菜鸟教程-Node.js 安装配置 Introduction Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and…

PHP 正则验证A-Z且排除某字母

都已经找到这里来了&#xff0c;相信已经尝试很多办法了&#xff0c;那么我们直接上答案 关键正则&#xff1a;(?!.*[IO]) //验证5到6个大写字母且排除I和O if (preg_match(/^(?!.*[IO])[A-Z\d]{5,6}$/u, AAAAM)) {echo "匹配成功"; } else {echo "匹配失败…

今日指数项目集成SpringSecurity

项目集成SpringSecurity ​ 在第一章我们是基于SpringSecurity、JWT技术实现前后端无状态化认证授权&#xff0c;而我们当前的项目是前后端分离的架构&#xff0c;同样也可借助Security框架和Jwt实现前后端的无状态认证授权操作&#xff1b; 1、项目自定义认证过滤器 1.1 依…

特斯拉Robotaxi发布会2024:自动驾驶未来的开端

引言 2024年10月&#xff0c;特斯拉在洛杉矶举行了一场引发全球科技界高度关注的发布会&#xff0c;主题为“We Robot”。这场发布会展示了特斯拉的最新自动驾驶技术&#xff0c;包括无人驾驶出租车Cybercab和无人驾驶厢式货车Robovan&#xff0c;并且还展示了人形机器人Optim…

D43【python 接口自动化学习】- python基础之函数

day43 装饰器&#xff08;上&#xff09; 学习日期&#xff1a;20241020 学习目标&#xff1a;函数&#xfe63;- 56 装饰器&#xff1a;函数嵌套的定义与调用的区别 学习笔记&#xff1a; 变量作用域 变量读取顺序&#xff1a;local-》enclosed-》global-》builtin # 变量…

owasp top 10漏洞原理与防御技术(原理和对应防御技术)

OWASP&#xff08;Open Web Application Security Project&#xff09;每年发布的Top 10 Web应用程序安全风险&#xff0c;是对开发人员、项目经理和组织的一个重要指南。这些风险代表了最常见且具有严重影响的安全漏洞。 1. 注入 原理 注入漏洞是指当攻击者将恶意代码插入应…