uniapp 实现topwindow，leftwindow

在Uniapp中实现topwindow和leftwindow可以使用uni-ui组件库中的popup和drawer组件。

1. 实现topwindow

使用popup组件可以实现弹出式的topwindow。

<template>
  <view>
    <popup :show.sync="showTopWindow" position="top">
      <view class="content">这是一个TopWindow</view>
    </popup>
    <button @click="showTopWindow = true">显示TopWindow</button>
  </view>
</template>

<style>
  .content {
    width: 100%;
    height: 200px;
    background-color: #fff;
    text-align: center;
    line-height: 200px;
  }
</style>

<script>
  export default {
    data() {
      return {
        showTopWindow: false
      }
    }
  }
</script>

2. 实现leftwindow

使用drawer组件可以实现左侧滑动的leftwindow。

<template>
  <view>
    <drawer :show.sync="showLeftWindow" position="left" :width="300">
      <view class="content">这是一个LeftWindow</view>
    </drawer>
    <button @click="showLeftWindow = true">显示LeftWindow</button>
  </view>
</template>

<style>
  .content {
    width: 100%;
    height: 100%;
    background-color: #fff;
    text-align: center;
    line-height: 200px;
  }
</style>

<script>
  export default {
    data() {
      return {
        showLeftWindow: false
      }
    }
  }
</script>