page级别的骚操作之禁用页面滚动问题详解

page级别的骚操作之禁用页面滚动

在做小程序项目的时候，遇到了这么一个问题。那就是希望能够动态的设置页面的滚动与否。
然鹅，官方提供的page级别的api操作里面显然是没有的。
首先，我们要知道的一点是小程序的每个页面的根元素为page，在对应的xxx.wxss中我们可以对其样式进行调整。

1. page{
2. background: #000;
3. color: #fff;
4. }

书归正传，那么怎么动态的设置页面的滚动与否呢？

在wxml的布局里面使用一个最外层view组件包含其它内容

2. 我是第一屏
3. 我是第二屏
4.  
5. 点我控制滚动
   •  
   •  
   •  
   • page{
   • background: #000;
   • height: 100%;
   • color: #fff;
   • }
   • .test_page{
   • width: 100%;
   • height: 100%;
   • }
   • .hidden{
   • overflow: hidden;
   • }
   • .test_modal{
   • height: 100%;
   • }
   • .first_modal{
   • background: red;
   • }
   • .second_modal{
   • background: green;
   • }
   • .btn{
   • position: fixed;
   • width: 100%;
   • height: 88rpx;
   • bottom: 0;
   • display: flex;
   • align-items: center;
   • justify-content: center;
   • background: #0099ff;
   • font-size: 36rpx;
   • color: #fff;
   • }
   •  
   •  
   •  
   • Page({
   • data:{
   • isScroll:true
   • },
   • bindScrollStatus(){
   • this.setData({
   • isScroll: !this.data.isScroll
   • })
   • }
   • })

可滚动时

不可滚动时

至此小程序----page级的骚操作之动态设置页面滚动篇结束。
此种方法只能算是hack的一种手段。相对应的可能会失去一些其它api的使用。希望官方能够提供对应的api为最好（--_--）。此处作为抛砖引玉，有更好的处理方法还请指教。