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

实现照片:

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

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

点击进入,下载&安装

点击下载并导入HBuilderX

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

同样将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>

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

相关推荐
打不着的大喇叭10 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
zengzehui10 小时前
uniapp启动图被拉伸问题
uni-app
iOS阿玮13 小时前
AppStore教你一招免备案的骚操作!
uni-app·app·apple
ModyQyW1 天前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
耶啵奶膘2 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
耶啵奶膘2 天前
uniapp——地图路线绘制map
uni-app
shadouqi2 天前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤3 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
某公司摸鱼前端3 天前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app