当前位置: 首页 > news >正文

uview ui 1.x ActonSheet项太多,设置滚动

问题:ActionSheet滚动不了。

使用uview ui :u-action-sheet, 但是item太多,超出屏幕了, 查了一下文档,并没有设置滚动的地方。

官方文档:ActionSheet 操作菜单 | uView - 多平台快速开发的UI框架 - uni-app UI框架

解决

只能修改源码了,在v-for遍历外面添加一个滚动视图,即可,其他不变

<template><u-popup mode="bottom" :border-radius="borderRadius" :popup="false" v-model="value" :maskCloseAble="maskCloseAble"length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose" :z-index="uZIndex"><view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">{{tips.text}}</view><scroll-view scroll-y style="min-height: 100rpx;max-height: 700rpx;"><block v-for="(item, index) in list" :key="index"><view@touchmove.stop.prevent@tap="itemClick(index)":style="[itemStyle(index)]"class="u-action-sheet-item u-line-1":class="[index < list.length - 1 ? 'u-border-bottom' : '']":hover-stay-time="150"><text>{{item.text}}</text><text class="u-action-sheet-item__subtext u-line-1" v-if="item.subText">{{item.subText}}</text></view></block></scroll-view><view class="u-gab" v-if="cancelBtn"></view><view @touchmove.stop.prevent class="u-actionsheet-cancel u-action-sheet-item" hover-class="u-hover-class":hover-stay-time="150" v-if="cancelBtn" @tap="close">{{cancelText}}</view></u-popup>
</template>

 效果:控制差不多半屏显示了,不超屏幕了。 在电脑上用鼠标滚轮很正常。但是在手机滚动不了。

问题2: 手机上触摸滚动不了。

再去看源码,发现包裹着block里的view禁止触摸事件,导致滚动视图滚动不了。把@touchmove.stop.prevent删除即可

最终代码

<template><u-popup mode="bottom" :border-radius="borderRadius" :popup="false" v-model="value" :maskCloseAble="maskCloseAble"length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose" :z-index="uZIndex"><view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">{{tips.text}}</view><scroll-view scroll-y="true" style="min-height: 100rpx;max-height: 700rpx;"><block v-for="(item, index) in list" :key="index"><view@tap="itemClick(index)":style="[itemStyle(index)]"class="u-action-sheet-item u-line-1":class="[index < list.length - 1 ? 'u-border-bottom' : '']":hover-stay-time="150"><text>{{item.text}}</text><text class="u-action-sheet-item__subtext u-line-1" v-if="item.subText">{{item.subText}}</text></view></block></scroll-view><view class="u-gab" v-if="cancelBtn"></view><view @touchmove.stop.prevent class="u-actionsheet-cancel u-action-sheet-item" hover-class="u-hover-class":hover-stay-time="150" v-if="cancelBtn" @tap="close">{{cancelText}}</view></u-popup>
</template>

 .vue

//...
<view class="submenu"><u-action-sheet :list="subList" v-model="showSub" :tips="menuTitle" @click="selectSubMenu"></u-action-sheet></view>//...export default {components: {HeadNavBar},data() {return {menuTitle: {text: "运营管理"},subList: [{text: 'item1'}, {text: 'item2'}, {text: 'item3'}, {text: 'item4'}, {text: 'item5'},{text: 'item6'}, {text: 'item7'},{text: 'item8'}, {text: 'item9'},{text: 'item10'}, {text: 'item11'},{text: 'item12'}, {text: 'item13'}],showSub: false,}}
}//...

手机上效果:

相关文章:

uview ui 1.x ActonSheet项太多,设置滚动

问题&#xff1a;ActionSheet滚动不了。 使用uview ui &#xff1a;u-action-sheet, 但是item太多&#xff0c;超出屏幕了&#xff0c; 查了一下文档&#xff0c;并没有设置滚动的地方。 官方文档&#xff1a;ActionSheet 操作菜单 | uView - 多平台快速开发的UI框架 - uni-a…...

信息化发展2

信息系统生命周期 1 、软件的生命周期通常包括&#xff1a;可行性分析与项目开发计划、需求分析、概要设计、详细设计、编码、测试、维护等阶段。 2 、信息系统的生命周期可以简化为&#xff1a;系统规划&#xff08;可行性分析与项目开发计划&#xff09;&#xff0c;系统分析…...

ubuntu18 + ros2 eloquent +python3.6

卸载 sudo systemctl stop ros2-eloquent-* #输入以下命令以停止所有ROS 2 Eloquent相关的进程 sudo apt remove ros-eloquent-* #输入以下命令以卸载ROS 2 Eloquent软件包 ls /etc/ros/ ls /opt/ros/ sudo rm -rf /opt/ros/eloquent#输入以下命令以删除ROS 2 Eloquent的配置文…...

围棋与育种

最近因为娃子报名了围棋课&#xff0c;我本着交一次课学两个人的态度&#xff0c;入门围棋&#xff0c;买了些书&#xff0c;听了些课&#xff0c;有所得。学了两个多月&#xff0c;现在6级水平&#xff0c;了解了基本的攻杀技巧&#xff0c;会判断输赢。 下面截图是今天的一盘…...

Python第三方库纵览

Python第三方库纵览 知识点 更广泛的Python计算生态&#xff0c;只要求了解第三方库的名称&#xff0c;不限于以下领域: 网络爬虫、数据分析、文本处理、数据可视化、用户图形界面、机器学习、Web开发、游戏开发等 知识导图 1、网络爬虫方向 网络爬虫是自动进行HTTP访问并捕…...

测试.net开源音频库NAudio

微信公众号“dotNET跨平台”看到一篇文章《【.NET】使用NAudio实现录音功能》介绍基于NAudio实现录音功能&#xff08;参考文献1&#xff09;。NAudio是开源.net音频库&#xff0c;其支持播放多种格式的音频&#xff08;WAV、AIFF、MP3、WMA等&#xff09;、音频格式转换、录音…...

三方接口调用设计方案

在为第三方系统提供接口的时候&#xff0c;肯定要考虑接口数据的安全问题&#xff0c;比如数据是否被篡改&#xff0c;数据是否已经过时&#xff0c;数据是否可以重复提交等问题 在设计三方接口调用的方案时&#xff0c;需要考虑到安全性和可用性。以下是一种设计方案的概述&a…...

OLED透明屏全贴合技术:未来显示技术的突破性创新

在现代科技发展的浪潮中&#xff0c;OLED透明屏全贴合技术以其独特的优势和无限的应用前景引起了广泛的关注。 在这篇文章中&#xff0c;尼伽将深入探索OLED透明屏全贴合技术&#xff0c;介绍其优势和特点&#xff0c;并展望其在不同领域的应用前景。 一、OLED透明屏全贴合技术…...

map、sync.map、concurrent-map适用场景与源码解析

最近一直加班&#xff0c;无论工作日还是周末&#xff0c;虽然每天很忙但总感觉空空的&#xff0c;很少有时间停下来思考与总结。项目中各种甩锅&#xff0c;最后最苦逼的还是落到了研发的头上&#xff0c;文档编写、环境部署、问题排查虐得一遍又一遍。事情杂乱&#xff0c;研…...

分布式事物实现方案及优缺点

实现分布式事务是一个复杂的任务&#xff0c;涉及到许多技术和概念。在Java开发中&#xff0c;你可以借助一些框架和工具来实现分布式事务&#xff0c;以下是一些常见的方法&#xff1a; 1.两阶段提交&#xff08;2PC&#xff09; 这是一种经典的分布式事务处理方法。它涉及到…...

java使用@interface和反射来动态生成excel

1、对象类上搞注解 public class ReportExecuteDetailDto { // 项目信息 private String regionCode; // 大区编号 ExcelColumn(order 0, title "大区") private String regionName; // 大区名称 ExcelColumn(order 14, tit…...

【微服务】04-Polly实现失败重试和限流熔断

文章目录 1. Polly实现失败重试1.1 Polly组件包1.2 Polly的能力1.3 Polly使用步骤1.4 适合失败重试的场景1.5 最佳实践 2.Polly实现熔断限流避免雪崩效应2.1 策略类型2.2 组合策略 1. Polly实现失败重试 1.1 Polly组件包 PollyPolly.Extensions.HttpMicrosoft.Extensions.Htt…...

如何使用HTML5新增的标签来构建语义化的页面结构?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ <header>&#xff1a;⭐ <nav>&#xff1a;⭐ <main>&#xff1a;⭐ <section>&#xff1a;⭐ <article>&#xff1a;⭐ <aside>&#xff1a;⭐ <footer>&#xff1a;⭐ <figure> 和 &l…...

Vmware 虚拟机挂起恢复后发现无法 Ping 通,无法连接到主机

解决办法 进入对应主机中&#xff0c;切换到 root 账户&#xff0c;重启网络服务。 systemctl stop NetworkManager systemctl restart network在网上还找到了另一种解决方法&#xff1a; 在网卡配置文件中增加参数 NM_CONTROLLED"no"。 在 Centos 7 中修改如下所…...

Web自动化测试之图文验证码的解决方案

对于web应用程序来讲&#xff0c;处于安全性考虑&#xff0c;在登录的时候&#xff0c;都会设置验证码&#xff0c; 验证码的类型种类繁多&#xff0c;有图片中辨别数字字母的&#xff0c;有点击图片中指定的文字的&#xff0c;也有算术计算结果的&#xff0c;再复杂一点就是滑…...

软考高级系统架构设计师系列论文九十:论分布式数据库的设计与实现

软考高级系统架构设计师系列论文九十:论分布式数据库的设计与实现 一、分布式数据库相关知识点二、摘要三、正文四、总结一、分布式数据库相关知识点 软考高级系统架构设计师系列之:分布式存储技术...

Day 84:网络结构与参数

单层数据 package dl;/*** One layer, support all four layer types. The code mainly initializes, gets,* and sets variables. Essentially no algorithm is implemented.*/ public class CnnLayer {/*** The type of the layer.*/LayerTypeEnum type;/*** The number of …...

vue2.6及以下版本导入 TDesign UI组件库

TDesign 官方文档:https://tdesign.tencent.com/vue/components/button 我们先打开一个普通的vue项目 然后 如果你是 vue 2.6 或者 低于 2.6 在终端执行 npm i tdesign-vue如果你是 2.7 或者更高 执行 npm i tdesign-vuenaruto这里 我们 以 2.6为例 因为大部分人 用vue2 都是…...

VR/AR/眼镜投屏充电方案(LDR6020)

VR眼镜即VR头显&#xff0c;也称虚拟现实头戴式显示设备&#xff0c;随着元宇宙概念的传播&#xff0c;VR眼镜的热度一直只增不减&#xff0c;但是头戴设备的续航一直被人诟病&#xff0c;如果增大电池就会让头显变得笨重影响体验&#xff0c;所以目前最佳的解决方案还是使用VR…...

区分什么是Java内存模型(JMM)和 JVM运行时数据区

文章目录 一、概念区分1、什么是内存模型&#xff1f;什么是&#xff08;内存区域&#xff09;运行时数据区&#xff1f;2、为什么要有Java内存模型&#xff1f;2.1、硬件的效率与一致性2.2、 CPU和缓存的一致性2.2.1、为什么需要CPU cache&#xff1f;2.2.2、三级缓存&#xf…...

Ryzen系统管理单元调试:基于SMUDebugTool的高级硬件参数调优策略

Ryzen系统管理单元调试&#xff1a;基于SMUDebugTool的高级硬件参数调优策略 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: …...

3分钟突破百度网盘资源壁垒:智能链接解析工具革新资源获取体验

3分钟突破百度网盘资源壁垒&#xff1a;智能链接解析工具革新资源获取体验 【免费下载链接】baidupankey 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 你是否经历过这样的场景&#xff1a;导师分享的学术资料被提取码挡在门外&#xff0c;加班急需的项目…...

AT32F403A开发板8个串口全开实战:用V2库实现多路数据同时收发(附完整代码)

AT32F403A开发板8串口全开实战&#xff1a;工业级多通道通信架构设计 在工业自动化、智能仓储和物联网网关等场景中&#xff0c;经常需要同时对接多个传感器、执行器或通信模块。传统方案往往采用多个MCU协同工作或外加串口扩展芯片&#xff0c;而AT32F403AVGT7凭借其原生8个串…...

WebRTC信令交换实战:从Socket.io到RTCPeerConnection的完整流程解析

1. WebRTC信令交换的核心逻辑 第一次接触WebRTC时&#xff0c;我被它"点对点直接通信"的特性吸引&#xff0c;但很快发现真正的难点在于如何让两个设备找到彼此——这就是信令交换要解决的问题。信令交换就像两个陌生人交换电话号码的过程&#xff0c;只不过这里交换…...

BleSerial:嵌入式BLE UART流式通信C++库

1. BleSerial 库概述BleSerial 是一个面向嵌入式系统的轻量级 C 库&#xff0c;其核心设计目标是将蓝牙低功耗&#xff08;BLE&#xff09;通信抽象为标准 CStream对象&#xff08;即继承自Stream类的实例&#xff09;&#xff0c;从而无缝接入 Arduino 及兼容平台&#xff08;…...

华为交换机-跨Vlan通信的实战配置指南

1. 华为交换机跨VLAN通信的核心原理 第一次接触跨VLAN通信时&#xff0c;我也被那些专业术语搞得一头雾水。直到把整个流程拆解成生活场景&#xff0c;才真正理解其中的奥妙。想象一下&#xff0c;VLAN就像公司里的不同部门&#xff0c;财务部、技术部、市场部各自在独立的办公…...

ViGEmBus虚拟游戏手柄驱动:重构Windows输入控制生态的核心引擎

ViGEmBus虚拟游戏手柄驱动&#xff1a;重构Windows输入控制生态的核心引擎 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus 一、价值定位&#xff1a;虚拟设备…...

OpenClaw技能组合:GLM-4.7-Flash多功能集成方案

OpenClaw技能组合&#xff1a;GLM-4.7-Flash多功能集成方案 1. 为什么需要技能组合&#xff1f; 去年冬天&#xff0c;我接手了一个内容运营的兼职项目&#xff0c;需要每周整理行业动态、生成分析报告并发布到三个不同平台。最初我尝试手动操作&#xff0c;但很快发现这种重…...

电源键按下去后发生了什么?用Wireshark+日志分析揭秘操作系统启动的隐藏细节

电源键背后的技术探秘&#xff1a;用Wireshark与日志分析揭开系统启动的黑盒 当你按下电源键的那一刻&#xff0c;整台计算机仿佛被注入了生命。但在这个看似简单的动作背后&#xff0c;隐藏着一场精密编排的技术交响乐。作为运维工程师或开发者&#xff0c;理解这个过程不仅有…...

DownKyi如何成为B站视频下载的智能管家?8K高清+批量处理全解析

DownKyi如何成为B站视频下载的智能管家&#xff1f;8K高清批量处理全解析 【免费下载链接】downkyi 哔哩下载姬downkyi&#xff0c;哔哩哔哩网站视频下载工具&#xff0c;支持批量下载&#xff0c;支持8K、HDR、杜比视界&#xff0c;提供工具箱&#xff08;音视频提取、去水印等…...