Closed cucuzi closed 3 months ago
uni-datetime-picker弹出是按照当前位置弹出,你可以把popup改到底部
改为底部是可行,但是想要的是顶部popup效果。通过改css实现了。
请问下这个css是如何来改的呀
请问下这个css是如何来改的呀
uni-popup组件里面有两个uni-transition,在第二个uni-transition上加个customClass。然后在用到的地方加上指定样式,此外还需要禁用popup动画,因为popup弹出动画与该样式有关。(如果想要动画请自由发挥)
以下代码为参考:
...
<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>
请问下这个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>
还有个疑惑,这个动画样式在应该在什么位置来实现
版本信息
HbuilderX 4.15 uni-ui 1.5.0 vue 2
页面代码
复现步骤
在h5和钉钉小程序测试都这样
https://github.com/dcloudio/uni-ui/assets/48954949/2f4fb2a5-8402-4eb4-804d-6e382d56704e