uni-popup引入movable-area组件会导致拖拽条可拖出最大范围

最近在开发uniapp项目时需要在弹窗里引入一个拖拽条,如下:

引入官方组件movable-view,movable-view必须在movable-area组件中,并且必须是直接子节点,否则不能移动。起初当进度条滑动过快时会有失帧问题,查找官网发现movable-view有如下几个属性:

1、

inertiaBooleanfalsemovable-view是否带有惯性
dampingNumber20阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快360小程序不支持
frictionNumber2摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值360小程序不支持

不加此属性,当拖拽速度过快时,拖拽条会因为惯性问题失帧。

失帧问题解决之后,发现当在弹窗组件里使用此组件时,限制不了可移动的最大范围。

找了很多方式发现不能写在弹窗里,应该是源码有冲突,如果需要弹窗的话,就改成自定义背景色就好了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
你可以使用 `uni-popup` 组件来实现弹出层的效果。`uni-popup` 是 uni-app 框架的一个原生弹出层组件,可以在页面中创建一个弹出层,并控制其显示和隐藏。 首先,确保你已经在你的 uni-app 项目中安装了 `uni-popup` 组件。可以通过以下命令安装: ``` npm install @dcloudio/uni-popup ``` 接下来,在需要使用弹出层的页面中,引入 `uni-popup` 组件: ```vue <template> <view> <uni-popup :show="showPopup" @close="closePopup"> <!-- 弹出层的内容 --> </uni-popup> <!-- 其他页面内容 --> </view> </template> <script> import uniPopup from '@dcloudio/uni-popup' export default { components: { uniPopup }, data() { return { showPopup: false } }, methods: { openPopup() { this.showPopup = true }, closePopup() { this.showPopup = false } } } </script> ``` 在上述示例中,我们创建了一个 `showPopup` 的 data 属性来控制弹出层的显示和隐藏。当点击打开弹出层的按钮时,调用 `openPopup` 方法将 `showPopup` 设置为 `true`,弹出层将显示出来。当点击弹出层上的关闭按钮时,触发 `closePopup` 方法将 `showPopup` 设置为 `false`,弹出层将隐藏。 你可以根据需要自定义弹出层的内容,例如在 `<uni-popup>` 标签内添加你想要展示的内容。 这样就可以通过 `uni-popup` 组件来实现弹出层的效果了。记得根据实际情况调整代码,并在合适的时机调用 `openPopup` 方法来显示弹出层。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小白的成长日记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值