uni-app 弹出层uni-popup的实现以及禁止遮盖层页下的页面滑动

爱吃芒果_Today

已于 2024-10-19 16:41:14 修改

阅读量2.5k

点赞数 4

分类专栏： uni-app 文章标签： uni-app 前端框架前端 vue.js css

于 2024-10-19 16:39:36 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_60363448/article/details/143079019

版权

uni-app 专栏收录该内容

1 篇文章

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、实现弹出层需要使用的组件
二、使用步骤
- 页面编写
- 事件处理和监听
- 注意事项
总结

前言

提示：最近入职新公司负责小程序的研发，小程序是用uni-app研发的。中间有这样一个场景：点击“案例详情” 弹框展示案例内容。但是这个时候用户滑动弹框内部的内容的时候，遮盖层页面也会跟着滑动。查看uni-app 官网提示说现在前端存在这样的问题，需要用户自己想办法解决。于是就有了这篇博客。

一、代码演示

页面代码（可以直接使用）：

<template>
  <custom-container >
    <view class="page-body" 
                @touchend="end" 
                @touchmove="move"
                :class={popupShow:popupShow}">

      <view class="infoB-6" @click="showExample">点击这里可以弹框</view>
 
       <!-- 弹框页面 -->
      <uni-popup ref="planPopupShow"
                 style="z-index: 999;" 
                 catchtouchmove="true" 
                 @maskClick="onMaskClick">
        <view class="plan-popup-title">
          <view class="A-text">uni-app弹出页面效果</view>
          <view class="info-show">
            <text>姓名：uni-app</text>
            <text>背景：程序员</text>
            <text>类型：国企</text>
            <text>&nbsp;&nbsp;</text>
            <textarea rows="6" readonly class="custom-textarea">
                   测试弹框========================》
                   测试弹框========================》
                   测试弹框========================》
                   测试弹框========================》
                   测试弹框========================》
                   测试弹框========================》
            </textarea>
          </view>
        </view>
      </uni-popup>

      </view>
  </custom-container>
</template>


<script>
const moduleName='oneVipCoach'
import {
  mapState,
  mapGetters,
} from 'vuex'

export default {
  data() {
    return {
      popupShow:false
    };
  },

  methods:{
    showExample(){
      this.$refs.planPopupShow.open()
      // 弹出框显示时，禁止页面滚动
      this.popupShow = true;
    },
    onMaskClick() {
      console.log('遮罩层被点击触发关闭弹出框');
      this.popupShow = false;
      this.$refs.planPopupShow.close();
    }

  }
}
</script>

<style lang="scss" scoped>
 .popupShow {
   overflow: hidden;
   position: fixed;
  }

  .plan-popup-title{
    width: 690upx;
    height: 100%;
    background: rgba(46, 49, 66, 1);
    border-radius: 20px;
    padding-bottom: 20upx;
    border: 1upx solid red;
    font-size: 24upx;
    float: left;
    .A-text {
      height: 60upx;
      width: 690upx;
      border: 1upx solid green;
      margin-top: 62upx;
      opacity: 1;
      /** 文本1 */
      font-size: 36upx;
      font-weight: 600;
      letter-spacing: 0upx;
      line-height: 47.74upx;
      margin-bottom: 30upx;
      text-align: center;
      vertical-align: top;
      background: linear-gradient(to right, rgb(242, 245, 196), rgb(247, 205, 166));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .info-show{
      width: 640upx;
      height: 800upx;
      margin-left: 25upx;
      line-height: 46upx;
      .custom-textarea{
        width: 100%;
        color: white;
        height: auto;
        border: 1upx solid red;
        overflow-y: auto; /* 当内容超过四行时，启用垂直滚动 */
        max-height: 13em; /* 控制最大高度，假设每行高度约为1.5em */
        //line-height: 1.62em; /* 行高 */
      }
      text{
        width: 100%;
        border: 1upx solid red;
        float: left;
        color: white;
      }
  }

</style>