uniapp的底部弹出层实现保姆式教程

实现照片：

此过程先进入uniapp官网，找到扩展组件

打开找到里面的uni-popup和uni-icons

点击进入，下载&安装

点击下载并导入HBuilderX

导入到你使用的目录，如test目录

同样将uni-icons点击下载并导入HBuilderX

点击合并

此时test文件夹下多了一个uni-modules文件夹

在pages下的index.vue内编写代码，如下：

<template><view><button @click="open">打开弹窗</button><uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="10px 10px 0 0" :show="true" @close="closePopup"><view style="border-bottom: 1rpx solid #E5E5E5;padding:24rpx 0 32rpx; text-align: center;">提示</view><view class="flex-colomn"><view class="tet">正确答案为：{{answer}}</view><uni-icons class="close-btn" type="closeempty" size="20" @click="closePopup"></uni-icons></view></uni-popup></view>
</template>
<script>
export default {data() {return {answer: 'A',}},methods:{open(){// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']this.$refs.popup.open('bottom')},closePopup() {this.$refs.popup.close()},}
}
</script><style>
.tet {display: flex;justify-content: center;align-items: flex-start;height: 45vh;font-size: 25px;margin-top: 20rpx;
}
.close-btn {position: absolute;top: 20rpx;right: 20rpx;cursor: pointer;}</style>

里面代码官网都有解释，获得底部弹出效果。