钉钉小程序 - - - - - overflow无效?

钉钉小程序 - - - - - overflow无效?

问题描述:

钉钉原生小程序,使用overflow:auto时,没有产生预期效果。

代码示例:

UI组件库 : Ding Design

Ding Design 是由钉钉设计团队、产品团队和终端技术团队共同打造的前端组件项目,目的是为了帮助开发者提高开发效率、提升产品体验。

modal是上述UI库的组件

期望效果为:

  • 自定义一个关闭弹窗按钮(因为该弹窗不支持点击蒙层股关闭)
  • 内容为可滚动的列表

代码如下:

html 复制代码
<modal show="{{show}}" buttonList='null'>
  <view slot="modal-content" class="dtmini-modal-slot relative">
    <view class="absolute close" catchTap="triggerCancel"> x</view>
    <view class="scroll-wrap">
      <view a:for="{{ 20 }}">
        {{item}}
      </view>
    </view>
  </view>
</modal>
css 复制代码
.scroll-wrap {
  height: 200rpx;
  overflow: auto;
}
.scroll-wrap view{
  height: 30rpx;
}

定位原因:

刚开始以为是这块代码写法有问题,重写之后依然无效。

  1. 在其他页面内使用overflow: auto;依然好用。
  2. 怀疑是外层有position或者display,对overflow有了影响,但是重写之后依然无效。
  3. 再尝试把 .scroll-wrap对应的标签换成scroll-view依然无效。
  4. 最后用排除法,在当前页面空白区域再次尝试使用overflow: auto;(不再modal里使用),发现能够正常滚动

SO ,那就是Ding Design组件库的modal有问题!!!!!!!!!!!!!!!!!!!!!!!!!!!!

解决办法:

方案一:

自己手写一个modal,不使用UI库组件

方案二:

组件库提供了对应的属性 disableScroll

代码改成:

html 复制代码
<modal show="{{show}}" buttonList='null' disableScroll='{{false}}'>
</modal>

至此问题完美解决




需要狠狠吐槽钉钉团队相关的项目。

  1. 钉钉小程序缓存太严重,使用onCheckForUpdate检测是否有新版本,根本就没有用!!!!!
  2. 缓存延迟,导致验证真机效果太费时间
  3. 对于头部自定义兼容性不好!!!!
  4. 同样API写法,微信小程序完美展示,钉钉就是修改不了
  5. 自己团队出的UI组件,坑也是多的没谱!!!
相关推荐
汤姆yu15 小时前
基于微信小程序的消防隐患在线举报系统
微信小程序·小程序·消防隐患
LKID体15 小时前
调用钉钉接口发送消息
钉钉
郏国上15 小时前
微信小程序的消息头增加的字段不能有下滑线,字段大写字母自动转换消息字母
微信小程序·小程序·
小俱的一步步15 小时前
钉钉自定义机器人发送群消息(加签方式、http发送)
机器人·钉钉
guanpinkeji18 小时前
陪诊小程序搭建,打造一站式陪诊服务
大数据·小程序·小程序开发·陪诊·陪诊小程序
qq_3573896318 小时前
仿途唬养车系统汽修服务小程序修车店小程序源码
小程序
從南走到北18 小时前
JAVA数字人创作文案视频链接提取数字人源码小程序+公众号+APP+H5
微信小程序·小程序·微信公众平台
V+zmm101341 天前
高校教师成果管理小程序的设计与实现springboot+论文源码调试讲解
java·微信小程序·小程序·毕业设计·ssm
多客软件佳佳1 天前
便捷的线上游戏陪玩、线下家政预约以及语音陪聊服务怎么做?系统代码解析
前端·游戏·小程序·前端框架·uni-app·交友
咸虾米_2 天前
咸虾米壁纸微信小程序下载图片到相册saveImageToPhotosAlbum功能修改
微信小程序·小程序·uniapp·notepad++