解决思路就是给body中添加样式，控制其内容溢出裁剪，不滚动，即overflow:hidden

具体步骤：

1. 新建utils/isScroll.js，Vue原型上添加禁止滚动和恢复滚动的方法

import Vue from "vue";

// 禁止滚动
Vue.prototype.noScroll = function () {
  document.body.style.overflow = "hidden";
};

// 追加滚动
Vue.prototype.canScroll = function () {
  document.body.style.overflow = "";
};

2. main.js引入utils工具方法文件

import "./utils/isScroll";

3. 模板template中使用
   • 当打开popup弹出层时：

   	<view
       	@tap="
           	() => {
               	show = true;
               	noScroll();
               }
           "
       	>
       	点击弹出弹出层
   	</view>
   

   • 当关闭popup弹出层时：

   <u-popup
   	:show="show"
   	mode="right"
   	@close="
   		() => {
   			show = false;
   			canScroll();
   		}
   	"
   closeable
   >
   	<view>...内容</view
   </u-popup>
   

4. methods中使用
   • 当打开popup弹出层时：

   <view @tap="open">
   	点击弹出弹出层
   </view>
   	// ...
   <script>
   	methods: {
   		open(){
   			this.show = true
   			this.noScroll()
   		}
   	}
   </script>
   

   • 当关闭popup弹出层时：

   <u-popup
   	:show="show"
   	mode="right"
   	@close="close"
   	closeable
   >
   	<view>...内容</view
   </u-popup>
   // ...
   <script>
   	methods: {
   		close(){
   			this.show = false
   			this.canScroll()
   		}
   	}
   </script>