uniapp底部弹出层(uni-popup)使用技巧_uniapp从底部弹出一个盒子-CSDN博客

官网：uni-popup 弹出层 | uni-app官网 (dcloud.net.cn)

底部弹出的使用技巧工作中常用

1.一般app和小程序的弹窗都是在底部弹出，例如：

2.如何实现（简单实用）？

   uni-popup组件，我用vue3的时候是不用引入的，vue2需要先引入到项目中

怎么使用？记得先import导入和 components注册一下， 如何从底部弹出，圆弧怎么搞？

注意： import的文件位置正确，ref绑定的名称和this.$ref.后面的名称一致

<template>

<view>

<button @click=”open”>打开弹窗</button>

<uni-popup ref=”popup” type=”bottom”>

            <view class=”test-popup”>你好,底部弹出</view>

        </uni-popup>

</view>

</template>

<script>

import uniPopup from ‘@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue’

    export default {

        components: {

uniPopup

},

       methods:{

          open(){

            // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持

            //[‘top’,’left’,’bottom’,’right’,’center’]

            this.$refs.popup.open(‘bottom’)//底部弹出

          }

     }

}

</script>

<style lang=”scss”>

    .test-popup{

        background: white;//默认全屏时灰色，只需要把你需要的部分改成白色

        border-radius: 20px;//设置弧度的大小

        height: 200px;

    }

</style>

————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/m0_63553261/article/details/136150039