• QQ
  • nahooten@sina.com
  • 常州市九洲新世界花苑15-2

微信开发

小程序page级禁用页面滚动

原创内容,转载请注明原文网址:http://homeqin.cn/a/wenzhangboke/jishutiandi/weixinkaifa/2019/0507/487.html

 
常州游戏开发培训做小程序项目的时分,遇到了这么一个问题。那就是希望可以动态的设置页面的滚动与否。 
然鹅,官方提供的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
            })
        }
    })
手机App外包可滚动时
 
 
 
不可滚动时
 
 
 
至此小程序----page级的骚操作之动态设置页面滚动篇完毕。 
此种办法只能算是hack的一种手腕。相对应的可能会失去一些其它api的运用。希望官方可以提供对应的api为最好(--_--)。此处作为抛砖引玉,有更好的处置办法还请指教。

上篇:上一篇:在小程序中运用 React with Hooks
下篇:下一篇:小法式button配置open-type若何放分享图标