uni-app 4.13开发弹出层组件(二)弹出关闭功能

简介: uni-app 4.13开发弹出层组件(二)弹出关闭功能


index.nuve页面

<template>
  <view class="">
    <free-nav-bar :title="'微信'" :noreadnum="1" :fixed='true' @openExtend="openExtend"> 
      <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>
    
    <!-- 弹出层 -->
    <free-popup ref="extend">
      <view style="width: 300rpx;height: 400rpx;"></view>
    </free-popup>
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeMediaList from '@/components/free-ui/free-media-list.vue';
  import freePopup from '@/components/free-ui/free-popup.vue';
  export default {
    components: {
      freeNavBar,
      freeMediaList,
      freePopup
    },
    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
          }
        ]
      }
    },
    onLoad() {
      
    },
    methods: {
      openExtend(){
        this.$refs.extend.show();
      }
    },
  }
</script>
<style>
</style>

free-pupop.vue

<template>
  <div style="z-index:9999;overflow:hidden;" v-if="status">
    <!-- 蒙版 -->
    <view class="position-fixed top-0 left-0 right-0 bottom-0" style="background:rgba(0,0,0,0.5);"  @click="hide"></view>
      <!-- 弹出框内容 -->
      <div class="position-fixed  bg-white" style="left: 100rpx;top: 100rpx;">
          <slot></slot> 
      </div>
  </div>
</template>
<script>
  export default {
    props: {
      // 是否开启蒙版颜色
      maskColor: {
        type: Boolean,
        default: false
      },
      
    },
    data() {
      return {
        status: false,
        x:-1,
        y:1,
        maxX:0,
        maxY:0
      }
    },
    mounted() {
      try {
          const res = uni.getSystemInfoSync();
        this.maxX = res.windowWidth - uni.upx2px(this.bodyWidth)
        this.maxY = res.windowHeight - uni.upx2px(this.bodyHeight) - uni.upx2px(this.tabbarHeight)
      } catch (e) {
          // error
      }
    },
    computed: {
      getMaskColor() {
        let i = this.maskColor ? 0.5 : 0
        return `background-color: rgba(0,0,0,${i});` 
      },
      getBodyClass(){
        if(this.center){
          return 'left-0 right-0 bottom-0 top-0 flex align-center justify-center'
        }
        let bottom = this.bottom ? 'left-0 right-0 bottom-0' : 'rounded border'
        return `${this.bodyBgColor} ${bottom}`
      },
      getBodyStyle(){
        let left = this.x > -1 ? `left:${this.x}px;` : ''
        let top = this.y > -1 ? `top:${this.y}px;` : ''
        return left + top
      }
    },
    methods:{
      show(){
        this.status = true
      },
      hide(){
        this.status = false
      }
    }
  }
</script>
<style scoped>
  .free-animated{
    /* #ifdef APP-PLUS-NVUE */
    /* transform: scale(0,0);
    opacity: 0; */
    /* #endif */
  }
  .z-index{
    /* #ifndef APP-NVUE */
    z-index: 9999;
    /* #endif */
  }
</style>

free-nav-bar.vue

<template>
  <view>
    <view class="bg-light" :class="fixed?'fixed-top':''">
      <!-- 状态栏 -->
      <view :style="'height:'+statusBarHeight+'px;'"></view>
      <!-- 导航 -->
      <view class="w-100 flex align-center justify-between" style="height: 90rpx;">
        <!-- 左边 -->
        <view class="flex align-center">
          <!-- 标题 -->
          <text v-if="title" class="font-md ml-3" >{{getTitle}}</text>
        </view>
        <!-- 右边 -->
        <view class="flex align-center">
          <free-icon-button @click="search"><text class="iconfont font-md">&#xe6e3;</text></free-icon-button>
          <free-icon-button @click="openExtend"><text class="iconfont font-md">&#xe682;</text></free-icon-button>
        </view>
        <!--\ue6e3 \ue682 -->
      </view>
    </view>
    <!-- 站位 -->
    <view v-if="fixed" :style="fixedStyle"></view>
  </view>
</template>
<script>
  import freeIconButton from './free-icon-button.vue';
  export default {
    components: {
      freeIconButton,
    },
    props: {
      title: {
        type: String,
        default: ''
      },
      fixed:{
        type:Boolean,
        default:false
      },
      noreadnum:{
        type:Number,
        default:0
      }
    },
    data() {
      return {
        statusBarHeight: 0,
        navBarHeight: 0,
      }
    },
    mounted() {
      // 获取任务栏高度
      // #ifdef APP-PLUS-NVUE
      this.statusBarHeight = plus.navigator.getStatusbarHeight()
      // #endif
      this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
    },
    computed: {
      fixedStyle() {
        return `height:${this.navBarHeight}px`;
      },
      getTitle(){
        let noreadnum = this.noreadnum>0 ? '('+this.noreadnum+')' : '';
        return this.title + noreadnum;
      }
    },
    methods:{
      openExtend(){
        this.$emit('openExtend');
      }
    }
  }
</script>
<style>
</style>

页面如下

感谢大家观看,下期再见

目录
相关文章
|
21天前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
66 3
|
22天前
|
Android开发 开发者 UED
个人开发 App 成功上架手机应用市场的关键步骤
个人开发 App 成功上架手机应用市场的关键步骤
|
22天前
|
开发工具 数据安全/隐私保护 Android开发
【教程】APP 开发后如何上架?
【教程】APP 开发后如何上架?
|
21天前
|
Java Android开发 开发者
【Uniapp开发】APP的真机调试指南,从开发到上架全过程
【Uniapp开发】APP的真机调试指南,从开发到上架全过程
32 3
游戏直播APP平台开发多少钱成本:定制与成品源码差距这么大
开发一款游戏直播APP平台所需的费用是多少?对于计划投身这一领域的投资者来说,首要关心的问题之一就是。本文将探讨两种主要的开发模式——定制开发与成品源码二次开发的成本差异及其优劣势。
|
UED 数据管理 安全
如何分析APP功能需求、结构
<p><br></p> <p style="text-align:center"><span style="font-size:24px; color:#3366ff">如何分析APP功能需求、结构</span><br></p> <p></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-
3740 0
|
1月前
|
API
uni-app 146朋友圈列表api开发
uni-app 146朋友圈列表api开发
16 0
|
25天前
|
开发框架 移动开发 JavaScript
SpringCloud微服务实战——搭建企业级开发框架(四十六):【移动开发】整合uni-app搭建移动端快速开发框架-环境搭建
正如优秀的软件设计一样,uni-app把一些移动端常用的功能做成了独立的服务或者插件,我们在使用的时候只需要选择使用即可。但是在使用这些服务或者插件时一定要区分其提供的各种服务和插件的使用场景,例如其提供的【uni-starter快速开发项目模版】几乎集成了移动端所需的所有基础功能,使用非常方便,但是其许可协议只允许对接其uniCloud的JS开发服务端,不允许对接自己的php、java等其他后台系统。
134 2
|
1月前
|
移动开发 负载均衡 小程序
代驾app开发丨代驾系统开发玩法详情丨代驾系统开发网页版/H5/小程序及源码部署
**司机/代驾员端**:司机可以通过APP接收订单,查看订单详情、路线和导航,提供现场服务并进行确认。
|
1月前
|
人工智能 算法 数据处理
App Inventor 2 Personal Image Classifier (PIC) 拓展:自行训练AI图像识别模型,开发图像识别分类App
这里仅仅介绍一下AI图像识别App的实现原理,AI的基础技术细节不在本文讨论范围。通过拓展即可开发出一款完全自行训练AI模型,用于特定识别场景的App了。
40 1