邯郸网站设计公司,抖音推广平台入口,专做充电器的网站,网站工信部实名认证问题#xff1a;ActionSheet滚动不了。
使用uview ui #xff1a;u-action-sheet, 但是item太多#xff0c;超出屏幕了#xff0c; 查了一下文档#xff0c;并没有设置滚动的地方。
官方文档#xff1a;ActionSheet 操作菜单 | uView - 多平台快速开发的UI框架 - uni-a…问题ActionSheet滚动不了。
使用uview ui u-action-sheet, 但是item太多超出屏幕了 查了一下文档并没有设置滚动的地方。
官方文档ActionSheet 操作菜单 | uView - 多平台快速开发的UI框架 - uni-app UI框架 解决
只能修改源码了,在v-for遍历外面添加一个滚动视图即可其他不变 templateu-popup modebottom :border-radiusborderRadius :popupfalse v-modelvalue :maskCloseAblemaskCloseAblelengthauto :safeAreaInsetBottomsafeAreaInsetBottom closepopupClose :z-indexuZIndexview classu-tips u-border-bottom v-iftips.text :style[tipsStyle]{{tips.text}}/viewscroll-view scroll-y stylemin-height: 100rpx;max-height: 700rpx;block v-for(item, index) in list :keyindexviewtouchmove.stop.preventtapitemClick(index):style[itemStyle(index)]classu-action-sheet-item u-line-1:class[index list.length - 1 ? u-border-bottom : ]:hover-stay-time150text{{item.text}}/texttext classu-action-sheet-item__subtext u-line-1 v-ifitem.subText{{item.subText}}/text/view/block/scroll-viewview classu-gab v-ifcancelBtn/viewview touchmove.stop.prevent classu-actionsheet-cancel u-action-sheet-item hover-classu-hover-class:hover-stay-time150 v-ifcancelBtn tapclose{{cancelText}}/view/u-popup
/template 效果控制差不多半屏显示了不超屏幕了。 在电脑上用鼠标滚轮很正常。但是在手机滚动不了。 问题2 手机上触摸滚动不了。
再去看源码发现包裹着block里的view禁止触摸事件导致滚动视图滚动不了。把touchmove.stop.prevent删除即可 最终代码
templateu-popup modebottom :border-radiusborderRadius :popupfalse v-modelvalue :maskCloseAblemaskCloseAblelengthauto :safeAreaInsetBottomsafeAreaInsetBottom closepopupClose :z-indexuZIndexview classu-tips u-border-bottom v-iftips.text :style[tipsStyle]{{tips.text}}/viewscroll-view scroll-ytrue stylemin-height: 100rpx;max-height: 700rpx;block v-for(item, index) in list :keyindexviewtapitemClick(index):style[itemStyle(index)]classu-action-sheet-item u-line-1:class[index list.length - 1 ? u-border-bottom : ]:hover-stay-time150text{{item.text}}/texttext classu-action-sheet-item__subtext u-line-1 v-ifitem.subText{{item.subText}}/text/view/block/scroll-viewview classu-gab v-ifcancelBtn/viewview touchmove.stop.prevent classu-actionsheet-cancel u-action-sheet-item hover-classu-hover-class:hover-stay-time150 v-ifcancelBtn tapclose{{cancelText}}/view/u-popup
/template .vue
//...
view classsubmenuu-action-sheet :listsubList v-modelshowSub :tipsmenuTitle clickselectSubMenu/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,}}
}//...
手机上效果
