移动端在uni-popup中使用uni-datetime-picker样式错误

[cucuzi]

版本信息

HbuilderX 4.15 uni-ui 1.5.0 vue 2

页面代码

<template>
  <view>
    <button type="primary" @click="$refs.popup.open('top')">打开</button>
    <uni-popup ref="popup" background-color="#fff" :isMaskClick="false">
      <view style="padding:0 10px 10px">
        <uni-datetime-picker v-model="dateRange" type="daterange" />
        <view>
          <button type="primary" @click="handleClose">关闭</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        dateRange: [],
      };
    },
    methods: {
      handleClose() {
        this.$refs.popup.close()
      },
    }
  }
</script>
<style>
</style>

复现步骤

在h5和钉钉小程序测试都这样

https://github.com/dcloudio/uni-ui/assets/48954949/2f4fb2a5-8402-4eb4-804d-6e382d56704e

[GRCmade]

uni-datetime-picker弹出是按照当前位置弹出，你可以把popup改到底部

[cucuzi]

改为底部是可行，但是想要的是顶部popup效果。通过改css实现了。

[AloneZhao]

请问下这个css是如何来改的呀

[cucuzi]

请问下这个css是如何来改的呀

uni-popup组件里面有两个uni-transition，在第二个uni-transition上加个customClass。然后在用到的地方加上指定样式，此外还需要禁用popup动画，因为popup弹出动画与该样式有关。（如果想要动画请自由发挥）
以下代码为参考：

uni-popup.vue

...

<uni-transition customClass="uni-popup__transition" key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
...

页面代码

...
    <!-- 此处要加animation="false" -->
    <uni-popup ref="popup" :animation="false" background-color="#fff" :isMaskClick="false">
...
<!-- css样式 -->
<style lang="scss" scoped>
  ::v-deep {
    .uni-popup__transition {
      transform: none !important;
    }
  }
</style>

[AloneZhao]

请问下这个css是如何来改的呀

uni-popup组件里面有两个uni-transition，在第二个uni-transition上加个customClass。然后在用到的地方加上指定样式，此外还需要禁用popup动画，因为popup弹出动画与该样式有关。（如果想要动画请自由发挥） 以下代码为参考：

uni-popup.vue

...

<uni-transition customClass="uni-popup__transition" key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
...

页面代码

...
    <!-- 此处要加animation="false" -->
    <uni-popup ref="popup" :animation="false" background-color="#fff" :isMaskClick="false">
...
<!-- css样式 -->
<style lang="scss" scoped>
  ::v-deep {
    .uni-popup__transition {
      transform: none !important;
    }
  }
</style>

还有个疑惑，这个动画样式在应该在什么位置来实现