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

STM32 Cubemx 同名外设中断及回调

文章目录 前言示例工程个人理解 前言 最近在学习STM32&#xff0c;采用HAL库开发方式。记录一下同名外设中断及回调。 这里提及的同名外设指USART1/2之类的相同外设&#xff0c;但不是同一个instance。 示例工程 以使用cubemx配置两个同名外设EXTI0/EXT4为例。 在NVIC配置…...

储能辅助电力系统调峰的容量需求研究(matlab代码)

目录 1 主要内容 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序参考文献《储能辅助电力系统调峰的容量需求研究》&#xff0c;是一个很常规很经典的matlab优化代码&#xff0c;主要是对火电、风电和储能等电力设备主体进行优化调度&#xff0c;在调峰能力达不到时采…...

非计算机科班如何丝滑转码?(本人就是有点不丝滑)

我觉得无非三个办法可以选择(当然可能有其他方法) 自学 报班 有师傅带 但是在学习之前&#xff0c;你一定要明确你学习编程的目的是什么&#xff01; 游戏开发&#xff1f;后台研发&#xff1f;爬虫工程师&#xff1f;前端程序员?数据分析师&#xff1f; 或者 仅仅是想做一…...

tensorrtx部署yolov5 6.0

文章目录 一. yolov5 v6.0训练模型二.训练好的yolov5模型转tensorrt引擎 一. yolov5 v6.0训练模型 官网下载yolov5 v6.0代码 下载官方预训练好的模型 安装yolov5所需要的库文件&#xff0c;requirements.txt在下载好的yolov5源代码中有 pip install -r C:\Users\10001540…...

用html5写一个音乐播放器

在HTML5中创建一个简单的音乐播放器时&#xff0c;你可以使用<audio>元素来实现。以下是一个基本的示例&#xff1a; html <!DOCTYPE html> <html> <head> <title>音乐播放器</title> </head> <body> <h1>音乐…...

postgresql类型转换函数

postgresql类型转换函数 简介CAST 函数to_date 函数to_timestamp 函数to_char 函数to_number 函数隐式类型转换 简介 类型转换函数用于将数据从一种类型转换为另一种类型。 CAST 函数 CAST ( expr AS data_type )函数用于将 expr 转换为 data_type 数据类型&#xff1b;Post…...

Go 自学:Array阵列

以下代码展示了用两种方法建立array。 package mainimport "fmt"func main() {var fruitList [4]stringfruitList[0] "Apple"fruitList[1] "Tomato"fruitList[3] "Peach"fmt.Println("Fruit list is: ", fruitList)fmt.…...

大数据平台与数据仓库的五大区别

随着大数据的快速发展&#xff0c;很多人难以区分大数据平台与数据仓库的区别&#xff0c;两者傻傻分不清楚。今天我们小编就给大家汇总了大数据平台与数据仓库的五大区别&#xff0c;希望有用哦&#xff01;仅供参考&#xff01; 大数据平台与数据仓库的五大区别 一、概念不同…...

React 钩子汇总

React 钩子 一、常用的 React 钩子&#xff1a; 1. useState 用于在函数式组件中添加状态管理。它返回一个状态值和一个更新状态的函数&#xff0c;让你可以在组件中追踪和更新状态。 2. useEffect 用于在组件渲染完成后执行副作用操作&#xff0c;比如数据获取、订阅等。…...

Python爬取旅游网站数据机票酒店价格对比分析

本文将介绍如何使用Python爬虫从旅游网站上获取机票和酒店的价格数据&#xff0c;并实现价格对比分析&#xff0c;帮助你做出明智的旅行决策。我们提供了完善的方案和代码&#xff0c;让你能够轻松操作并获得实际价值。 使用Python爬虫获取旅游网站上的机票和酒店价格数据&…...

OA项目之会议通知(查询是否参会反馈详情)

目录 会议查询 是否参会 反馈详情 讲解思路 会议通知SQL语句分析 反馈详情SQL语句分析 后台代码编写 前端代码编写 效果预览 会议查询 MeetingFeedBack.java package com.zking.oa.model;import org.lisen.mvc.util.AutoIncrement; import org.lisen.mvc.util.…...

如何维护自己的电脑的措施

维护自己的电脑可以采取以下措施&#xff1a; 硬件维护&#xff1a;定期清理电脑表面的灰尘和污垢&#xff0c;避免灰尘对电脑内部部件造成影响。电源插座要保持接触良好&#xff0c;保证电脑的电源稳定。如果使用笔记本电脑&#xff0c;要注意保证散热通畅&#xff0c;避免电…...

VS2022 Community 安装步骤

VS2022 Community 安装步骤&#xff08;C语言学习&#xff09; 1. 下载地址2. 安装步骤 1. 下载地址 链接: VS2022 Community下载地址 2. 安装步骤 双击图标进行安装。 点击【继续】后等待安装。 选择需要的安装包并修改安装位置&#xff0c;然后点击【安装】。 点击安装…...

vue3中mitt.js使用

在vue2中我们通过事件总线eventbus,来实现两个平行组件之间的通信&#xff1a; bus.js import Vue from vue // 创建vue实例 const Bus new Vue() export default Bus在具体的组件中&#xff1a; A.vue import Bus from ./bus.js // 发布一个事件 Bus.$emit(sendData, {nam…...

Redis 内存淘汰策略详解

Redis 内存淘汰策略详解 一、简介Redis内存管理问题 二、内存淘汰策略1.为什么需要内存淘汰策略2.内存淘汰策略分类&#xff08;1&#xff09;noeviction&#xff08;2&#xff09;allkeys-lru&#xff08;3&#xff09;allkeys-lfu&#xff08;4&#xff09;volatile-lru&…...

初识Redis之分布式

一.简单介绍: Redis是用来在内存中, 存储数据的, 他的初心是用来搞消息中间件(或者说消息队列 很熟悉了吧~~),但是呢用的不多,他现在主要是用来做 数据库,缓存 用来存储数据, 为什么不直接存储呢? Redis的优势就在于分布式系统 二.分布式系统 要说其分布式系统,简单想想都能…...

计算机网络-笔记-第三章-数据链路层

目录 三、第三章——数据链路层 1、数据链路层概述&#xff08;帧&#xff09; &#xff08;1&#xff09;封装成帧、差错检测、可靠传输&#xff08;简单介绍&#xff09; &#xff08;2&#xff09;CSMA/CD 2、封装成帧 &#xff08;1&#xff09;透明传输&#xff08;…...

【1】openGL glew示例代码分析绘制一个三角形

openGL文档 > docs.gl &#xff0c;可以直接查询函数的定义和使用 #include <iostream> #include <string> #include <GL/glew.h> #include <GLFW/glfw3.h>int main(void) {GLFWwindow* window;/* Initialize the library */if (!glfwInit())retu…...

android:新建工程文件介绍

一、前言当我们新建一个app时会呈现出固定的工程文件&#xff0c;这篇文章介绍新建工程里的文件。 二、介绍 Structure:就是你选择哪个页面就会显示那个页面的结构&#xff0c;就比如说我选择的是MainActivity他就会显示这个页面所使用的方法。 1-2&#xff1a;是android自动生…...

Pixel Aurora Engine基础教程:Streamlit状态管理与多会话隔离机制

Pixel Aurora Engine基础教程&#xff1a;Streamlit状态管理与多会话隔离机制 1. 认识Pixel Aurora Engine Pixel Aurora是一款基于AI扩散模型的高端绘图工作站&#xff0c;采用独特的复古像素游戏风格界面。这款"虚拟游戏机"能将文字描述转化为极具视觉冲击力的像…...

nnUNet实战:如何根据你的显卡显存,手动调整batch_size和patch_size(附代码)

nnUNet显存优化实战&#xff1a;精准调整batch_size与patch_size的黄金法则 当你第一次在本地运行nnUNet训练脚本时&#xff0c;看到那个刺眼的CUDA out of memory错误&#xff0c;是不是有种功亏一篑的挫败感&#xff1f;别担心&#xff0c;这不是你的代码问题&#xff0c;而是…...

OpenClaw节日营销助手:gemma-3-12b-it自动生成祝福语与发送邮件

OpenClaw节日营销助手&#xff1a;gemma-3-12b-it自动生成祝福语与发送邮件 1. 为什么需要节日营销自动化&#xff1f; 去年端午节前夜&#xff0c;我盯着电脑屏幕上的200多个客户邮箱地址发呆。每个客户都需要个性化的节日祝福&#xff0c;但手动编写和发送至少需要6小时。当…...

如祺出行2025年营收53亿:网约车贡献97%收入 净亏2.9亿

雷递网 乐天 4月1日如祺出行科技有限公司&#xff08;股份代号&#xff1a;9680&#xff09;日前发布截至2025年12月31日的财报。财报显示&#xff0c;如祺出行2025年营收为52.86亿元&#xff0c;较上年同期的24.63亿元增长114.6%。如祺出行收入主要来自网约车服务&#xff0c;…...

气电版通用自动分选机:圆柱电芯测试分选的精准之选

在新能源产业蓬勃发展的当下&#xff0c;圆柱电芯作为重要的储能元件&#xff0c;其生产过程中的质量把控至关重要。内阻和电压作为衡量电芯性能的关键指标&#xff0c;直接关系到电芯的使用寿命、充放电效率以及安全性。气电版通用自动分选机凭借其卓越的性能和精准的分选能力…...

S03TodoWrite - 任务规划:没有计划的 Agent 会迷失方向

核心理念 “没有计划的 Agent 走哪算哪” – 先列步骤再动手&#xff0c;完成率翻倍。 源码&#xff1a;https://github.com/xiayongchao/learn-claude-code-4j/blob/main/src/main/java/org/jc/agents/S03TodoWrite.java原版&#xff1a;https://github.com/shareAI-lab/lea…...

OpenClaw批量任务队列:百川2-13B-4bits量化版处理百条邮件自动回复

OpenClaw批量任务队列&#xff1a;百川2-13B-4bits量化版处理百条邮件自动回复 1. 为什么需要邮件自动回复系统 上周我收到了一封来自老客户的紧急咨询邮件&#xff0c;当时正在外地参加会议无法及时回复。等三天后回到电脑前&#xff0c;发现邮箱里堆积了127封未读邮件——其…...

Java程序员的云原生时代生存指南:面向软件测试从业者的专业视角

在技术浪潮的冲击下&#xff0c;云原生已从概念演进为产业标准。对于广大Java程序员而言&#xff0c;这既是挑战也是机遇。传统的技术栈和开发模式正在经历深刻变革&#xff0c;而软件测试作为保障质量的关键环节&#xff0c;其理念与实践也随之迭代。 一、 挑战审视&#xff…...

嵌入式编程规范:提升代码质量与团队协作效率

1. 嵌入式编程规范的重要性作为一名在嵌入式领域摸爬滚打多年的工程师&#xff0c;我深刻体会到代码规范的重要性。记得刚入行时接手过一个老项目&#xff0c;里面混杂着五种不同的命名风格和三套缩进规则&#xff0c;光是理清代码逻辑就花了两周时间。从那以后&#xff0c;我就…...

【Java外部函数性能优化黄金法则】:20年JVM专家亲授JNI/FFM调优的7大致命误区与3步极速修复方案

第一章&#xff1a;Java外部函数优化的演进脉络与性能本质Java平台对外部函数调用&#xff08;Foreign Function & Memory API&#xff0c;即JEP 454/464/471/472&#xff09;的演进&#xff0c;标志着JVM从“纯Java世界”迈向系统级互操作的新纪元。其性能本质并非单纯降低…...