原创内容,转载请注明原文网址: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若何放分享图标