您当前的位置: 首页 > 解决方案

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

  • 作者: admin
  • 发布于 2019-01-16 10:33:28
  • 来源:  
  • 栏目:解决方案

导语: page级别的骚操作之禁用页面滚动在做小程序项目的时候,遇到了这么一个问题。那就是希望能够动态的设置页面的滚动与否。 然鹅,官方提供的page级别的api操作里面显然是没有

 

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

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

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

01.jpg

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

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

 
  1. <view class="test_page {{isScroll?'hidden':''}}">
  2. <view class="test_modal first_modal">我是第一屏</view>
  3. <view class="test_modal second_modal">我是第二屏</view>
  4.  
  5. <button class="btn" bind:tap="bindScrollStatus">点我控制滚动</buttton>
  6. </view>
  7.  
  8.  
  9. page{
  10. background: #000;
  11. height: 100%;
  12. color: #fff;
  13. }
  14. .test_page{
  15. width: 100%;
  16. height: 100%;
  17. }
  18. .hidden{
  19. overflow: hidden;
  20. }
  21. .test_modal{
  22. height: 100%;
  23. }
  24. .first_modal{
  25. background: red;
  26. }
  27. .second_modal{
  28. background: green;
  29. }
  30. .btn{
  31. position: fixed;
  32. width: 100%;
  33. height: 88rpx;
  34. bottom: 0;
  35. display: flex;
  36. align-items: center;
  37. justify-content: center;
  38. background: #0099ff;
  39. font-size: 36rpx;
  40. color: #fff;
  41. }
  42.  
  43.  
  44.  
  45. Page({
  46. data:{
  47. isScroll:true
  48. },
  49. bindScrollStatus(){
  50. this.setData({
  51. isScroll: !this.data.isScroll
  52. })
  53. }
  54. })

可滚动时

02.jpg

不可滚动时

03.jpg

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

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



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部