封装自己的移动端底部弹出框基于uniapp

前言

自己工作的时候接受的一个项目因为app壳子版本登记太低也是为了防止出现兼容问题，所有的组件都是自己封装的，这个项目是基于Uniapp开发的App和H5.我接手的业务中涉及到的组件很多，今天就自己封装一个底部弹出框，因为我这个弹出框是弹出内容在里面做选择，所以原来封装的都不好用不适合所以自己开发的。

代码部分

这是一个弹出框里面有很多的内容

<template>
<view @click='open'>点击打开</view>
<view class="poupbox"  :style="{transform:  status ? 'translateY(0)' : 'translateY(100%)'}">
		这里写你自己想写的内容	
</view>
<template>
export default {
		data() {
			return {
                            status:false
			}

		},
		onLoad() {

		},
		methods: {
                open(){
                    this.status=!status;
                }               
                
              }

	}

</script>
<style>
	.poupbox{
		background-color: #FFFFFF;
		border-top: 1px solid #CCCCCC;
		border-radius: 8px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		transition: all .3s;
        }
  </style>

结语

这就是最简单一个弹出框，可以基于这个弹出框去写时间选择的弹窗、日期选择的下拉框，把自己需求写到自己代码的内容区就可以了。