uview使用u-action-sheet添加滚动条

最新推荐文章于 2025-10-21 17:31:41 发布

原创最新推荐文章于 2025-10-21 17:31:41 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uview #微信小程序

本文探讨了如何对uviewUI库中的u-action-sheet.vue组件进行源码级修改，涉及Node模块结构和Vue组件开发，为开发者提供实用的技巧和理解开源库内部机制的方法。

0 效果

在这里插入图片描述

1 修改uview源码

node_modules/uview-ui/u-action-sheet/u-action-sheet.vue
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

o0麦嘎

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniapp中uview组件库丰富的ActionSheet 操作菜单使用方法

精通前端技术，了解后端接口

01-12

3257

本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的API，配置更加灵活，所有平台都表现一致。

uview ui 1.x ActonSheet项太多，设置滚动(亲测有效）

LlanyW的专栏

08-27

3777

再去看源码，发现包裹着block里的view禁止触摸事件，导致滚动视图滚动不了。把@touchmove.stop.prevent删除即可。使用uview ui ：u-action-sheet, 但是item太多，超出屏幕了，查了一下文档，并没有设置滚动的地方。只能修改源码了,在v-for遍历外面添加一个滚动视图，即可，其他不变。在电脑上用鼠标滚轮很正常.

参与评论您还未登录，请先登录后发表或查看评论

小程序uview actionSheet 内容过多高度设置

最新发布

yodoyskts的博客

10-21

327

找到node_modules -> uview_ui -> components -> u-action-sheet -> u-action-sheet.vue。还是源码的位置，可以看到block包裹的view有一个@touchmove.stop.prevent，这个是禁止触摸事件的，就是因为它导致的手机没法滚动，把这个删掉即可。这个时候在电脑上是可以滚动的，但是手机不行。我这里用的HB转译的小程序，路径如下。

修改uview中u-action-sheet内容过多实现滚动效果

by_Ftao的博客

05-28

1570

2.此版本是uView2.0版本,找到uni_modules/uview-ui/components/u-action-sheet/u-action-sheet.vue文件。1.如果你的uview是通过npm依赖包形式安装的不建议直接修改node_modules源码,可以使用uni_modules方式引入;3.主要实现代码是如下代码,把遍历生成的数据放进如下标签内即可;

uni+uview action-sheet滚动

m0_55251727的博客

08-19

2112

action-sheet可滚动

【u-action-sheet 数据多自动滚动】

u012814063的博客

06-08

2165

【代码】【u-action-sheet 数据多自动滚动】

uni微信小程序uView组件u-tabs有滚动条----已解决

xin_js_bug的博客

07-18

659

【代码】uni微信小程序uView组件u-tabs有滚动条----已解决。

uniapp + uview Select选择器(u-action-sheet)数据绑定 value,展示 text ------之------ 两个联动的Select选择器

YZRHANYU的博客

11-15

9121

uniapp + uview Select选择器(u-action-sheet)数据绑定 value,展示 text ------之------ 两个联动的Select选择器

UIScrollView滚动条的使用

jelly_1992的专栏

11-11

782

初始化

UIAction Sheet 的使用

12-28

2244

有时，我们在用户执行操作后比如，邮件发送后的确认，文件删除后的确认，等等都需要用到这个知识点，所以下面就为大家来分享一下；我们只需要建立一个单视图，并在HHLAppDelegate.m中新建navigationController 的对象，并把这个对象设置为当前的根视图控制器，而在HHLViewController.m中加载UIActionSheet的对象，并设置相应地操作。具体代码如下：

UIActionSheet用法

07-08

1373

UIActionSheet提供了从屏幕底部向上滚动的菜单，同UIAlertView一样，它也是一个模态对话框 UIActionSheet* alert =[[UIActionSheetalloc]initWithTitle:@"请选择您喜欢的颜色：" delegate:nil

DOPScrollableActionSheet:多行可滚动操作表

07-04

DOPScrollableActionSheet 多行可滚动操作表测试 iPad Air 7.1 8.1 iPhone5s 7.1 8.1 在 iPad 上在 iPhone 上 // DOPAction model // DOPScrollableActionSheet view and partial controller for showing and programmatical dismissing // multi scrollable row actionsheet @interface DOPScrollableActionSheet : UIView /* actions = @[@"row title one", //with title @[ac

微信小程序scroll-view的滚动条设置实现

11-20

小程序的scroll-view用的比较多了，列表页一般也没管它的滚动条，最近突然发现在android与ios中横向滑动的时候表现不一样。不一样在哪呢，ios上直接就不显示啊，也是没谁了。深入想了一下，这滚动条能不能换一颜色或者换个样式。有这冲动就立马着手改。 1。直接打开官方demo，仔细看了一遍官方文档，没有任何说明，这是官方文档的一贯作风。没有一个属性是去控制显示/隐藏滚动条，更别说这样式。所以文档是指望不上了。 2。既然是组件，那就是css来控制的。又去看一下css中的scroll的介绍，有大概如下的属性：参考链接。上图位置<1>:-webkit-scrollbar 滚动条整体部分

微信小程序 action-sheet详解及实例代码

11-29

uniapp + uview Select选择器 u-action-sheet 数据绑定 index,展示 text ------之------ 单个Select选择器

YZRHANYU的博客

11-15

2178

uniapp + uview Select选择器 u-action-sheet 数据绑定 index,展示 text

微信小程序——操作反馈小工具：action-sheet的使用及详解

啊哈嗯嗯的博客

04-08

5910

action-sheet——底部弹起的操作按钮组件属性： bindchange：点击“取消” 或 “背景蒙层”所触发的事件 hidden：action-sheet是否可见 <action-sheet-item bindtap="itemTap" data-name="{{item.name}}" data-id="{{item.id}}"> {{item.name}}&lt...

uView的NoticeBar 滚动通知自带的bug之获取不到click的索引

qq_41593185的博客

09-30

1726

2. 在方法区在swiperChange事件中动态改变每次项目滚动的索引，然后把当前获取的索引传给click事件，这样在u-notice-bar的点击事件的回调参数中就可以拿到索引了。1. 首先找到本地的uView包下的 u-column-notice的文件给swiper添加一个change事件。最终视觉效果：自下到上滚动。

UIScrollView的滚动条位置具体设置方法，超简单

douweichao的专栏

07-23

1223

通过设置scrollIndicatorInsets这个属性，来调整滚动条的位置 UIEdgeInsets UIEdgeInsetsMake ( CGFloat top, CGFloat left, CGFloat bottom, CGFloat right ); 四个参数分别表示，上边界，左边界，下边界，右边界是不是很简单！

uview u-action-sheet数据不显示

06-08

如果您使用uview的u-action-sheet组件，但是数据不显示，可能有以下几个原因： 1. 检查数据是否正确：请检查传递给u-action-sheet组件的数据是否正确，例如是否存在typo或者数据格式是否正确。 2. 检查样式是否...