当前位置: 首页 > 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…...

TwinCAT界面美化指南:3步搞定背景主题切换(附最佳配色方案推荐)

TwinCAT界面美化实战&#xff1a;从主题定制到高效编程的视觉优化 每次打开TwinCAT开发环境&#xff0c;是否觉得默认的灰白色调让人昏昏欲睡&#xff1f;作为工业自动化领域的核心开发工具&#xff0c;TwinCAT的界面美学长期被工程师们忽视。实际上&#xff0c;一个精心调校的…...

嵌入式 AI 新尝试:在 STM32 上部署轻量级情绪分类模型

嵌入式 AI 新尝试&#xff1a;在 STM32 上部署轻量级情绪分类模型 1. 前沿探索&#xff1a;当AI遇上嵌入式系统 最近在AI领域有个有趣的现象&#xff1a;越来越多开发者开始尝试把AI模型塞进那些资源极其有限的嵌入式设备里。这就像给一台老式收音机装上智能语音助手&#xf…...

Cookie 和 Session 分别存储在客户端还是服务端?

从“存包凭条”到“后台存包柜”&#xff1a;Cookie 与 Session 的存储位置深度剖析1. 引言&#xff1a;超市存包处的“凭条”与“存包柜”2. 前置知识&#xff1a;HTTP 的“健忘症”3. Cookie&#xff1a;客户端的“小凭条”3.1 是什么&#xff1f;3.2 解决什么问题&#xff1…...

YOLO11实战:从零到一搭建高效目标检测开发环境

1. 为什么选择YOLO11&#xff1f; 目标检测是计算机视觉领域最基础也最实用的技术之一。从自动驾驶的车辆识别到工业质检的缺陷检测&#xff0c;都离不开这项技术。而YOLO系列作为目标检测领域的"常青树"&#xff0c;一直以速度快、精度高著称。最新推出的YOLO11在保…...

从‘碎饼干’到‘稳如狗’:机器视觉定位项目避坑指南与SAME原则实战

从‘碎饼干’到‘稳如狗’&#xff1a;机器视觉定位项目避坑指南与SAME原则实战 去年接手某食品包装线改造项目时&#xff0c;产线主管指着满地饼干碎屑苦笑道&#xff1a;"这哪是智能生产线&#xff0c;简直是饼干粉碎机。"这个价值两百万的视觉定位系统&#xff0c…...

Linux下Conda+R+RStudio环境配置全攻略:从零搭建高效数据分析平台

1. 为什么选择Conda管理R环境&#xff1f; 很多数据分析师习惯直接在系统里安装R和R包&#xff0c;但很快就会遇到版本冲突的麻烦。比如你需要安装一个要求R 4.3.0的包&#xff0c;但系统里装的是R 4.2.0&#xff0c;更糟的是其他所有包都是基于4.2.0编译的。这时候conda的价值…...

MATLAB 2018B语音信号降噪与盲源分离GUI系统,多维滤波技术展示与实时外放体验

2-6 基于matlab 2018B的语音信号降噪和盲源分离GUI界面&#xff0c;包括维纳滤波&#xff0c;小波降噪、高通、低通、带通滤波&#xff0c;及提出的滤波方法。 每个功能均展示降噪前后声音效果并外放出来。 程序已调通&#xff0c;可直接运行。直接双击运行main.m&#xff0c;耳…...

阿里开源MGeo地址匹配:零基础3步搭建,开箱即用

阿里开源MGeo地址匹配&#xff1a;零基础3步搭建&#xff0c;开箱即用 1. 为什么你需要MGeo地址匹配&#xff1f; 地址数据混乱是每个数据工程师的噩梦。同一地点在不同系统中可能有十几种写法&#xff1a;"北京市海淀区中关村大街1号"、"北京海淀中关村1号&q…...

5大核心模块解锁Awesome Claude Skills:打造企业级AI工作流工具箱

5大核心模块解锁Awesome Claude Skills&#xff1a;打造企业级AI工作流工具箱 【免费下载链接】awesome-claude-skills A curated list of awesome Claude Skills, resources, and tools for customizing Claude AI workflows 项目地址: https://gitcode.com/GitHub_Trending…...

别再死记硬背了!一文搞懂EtherCAT四种寻址方式(附FMMU配置实例)

深入解析EtherCAT四大寻址机制&#xff1a;从原理到实战配置 第一次接触EtherCAT的工程师&#xff0c;往往会被其复杂的寻址方式搞得晕头转向。位置寻址、节点寻址、逻辑寻址、广播寻址——这些术语听起来相似却又各具特点&#xff0c;死记硬背不仅效率低下&#xff0c;更会在实…...