小程序----page级别的骚操作之禁用页面滚动

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

在做小程序项目的时候，遇到了这么一个问题。那就是希望能够动态的设置页面的滚动与否。

然鹅，官方提供的page级别的api操作里面显然是没有的。

首先，我们要知道的一点是小程序的每个页面的根元素为page，在对应的xxx.wxss中我们可以对其样式进行调整。

    page{
      background: #000;
      color: #fff;
    }

效果图

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

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

    <view class="test_page {{isScroll?'hidden':''}}">
        <view class="test_modal first_modal">我是第一屏</view>
        <view class="test_modal second_modal">我是第二屏</view>

        <button class="btn" bind:tap="bindScrollStatus">点我控制滚动</buttton>
    </view>

    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为最好（--_--）。此处作为抛砖引玉，有更好的处理方法还请指教。

---

如果对你觉得本章不错，请不要吝啬给个赞呗