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

问题:ActionSheet滚动不了。

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

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

uview ui 1.x ActonSheet项太多,设置滚动_第1张图片

解决

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

uview ui 1.x ActonSheet项太多,设置滚动_第2张图片

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

uview ui 1.x ActonSheet项太多,设置滚动_第3张图片

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

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

uview ui 1.x ActonSheet项太多,设置滚动_第4张图片

最终代码

 .vue

//...

      
    

//...


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项太多,设置滚动_第5张图片

你可能感兴趣的:(uview,u-action-sheet,ActionSheet,uni-app)