uni-app 4.12开发弹出层组件（一）基础架构

弹框开发

<template>
  <view class="">
    <free-nav-bar :title="'微信（100）'" :fixed='true'>
      <template v-slot="title"></template>
    </free-nav-bar>
    
    <!-- 列表 -->
    <block v-for="(item,index) in list" :key="index">
      <free-media-list :item="item" :index="index"></free-media-list>
    </block>
    
    <!-- 弹出层 -->
    <div style="z-index:9999;overflow:hidden;">
      <!-- 蒙版 -->
      <div class="position-fixed top-0 right-0 bottom-0" style="background-color:rgba(0,0,0,0.5);"></div>
        <!-- 弹出框内容 -->
        <div class="position-fixed  bg-white" style="left: 100rpx;top: 100rpx;">
            <view style="height: 300rpx;width: 200rpx;"></view>   
        </div>
    </div>
  </view>
</template>

<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeMediaList from '@/components/free-ui/free-media-list.vue';
  export default {
    components: {
      freeNavBar,
      freeMediaList
    },
    data() {
      return {
        list:[
          {
            avatar:"/static/images/demo/demo6.jpg",
            nickname:"昵称",
            update_time:1628069958,
            data:"你好啊，哈哈哈",
            noreadnum:1
          },
          {
            avatar:"/static/images/demo/demo6.jpg",
            nickname:"昵称",
            update_time:1628069958,
            data:"你好啊，哈哈哈",
            noreadnum:12
          },
          {
            avatar:"/static/images/demo/demo6.jpg",
            nickname:"昵称",
            update_time:1628069958,
            data:"你好啊，哈哈哈",
            noreadnum:2
          },
          {
            avatar:"/static/images/demo/demo6.jpg",
            nickname:"昵称",
            update_time:1628069958,
            data:"你好啊，哈哈哈",
            noreadnum:10
          }
        ]
      }
    },
    onl oad() {
      
    },
    methods: {

    }
  }
</script>

<style>

</style>

如图所示

感谢大家观看，我们下期再见。