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

Python_QB2024-05-10 15:15

实现照片：

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

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

点击进入，下载&安装

点击下载并导入HBuilderX

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

点击合并

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

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

html 复制代码

<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>

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