钉钉小程序使用getApp实现类似provide inject的功能应用场景:解决页面同步子组件弹窗的滚动问题

news2024/11/14 11:32:11

前言:在开发钉钉小程序的时候组件内部的弹窗滚动会带着视图同步滚动所以需要在组件内部弹窗显示的时候禁用视图的scroll滚动由于我组件封装的比较深不可能逐级传递 dd也么有provide的语法所以我使用的getApp 完成控制的效果最终完美运行觉得有帮助相互关注一下后续会持续更新钉钉小程序的坑废话不多说了直接上代码

   //首先在app.js里面定义全局变量
    
App({
  //存储回调的函数
  myProvide:null,
  //存储当前页面的this
  that:null,
  <!- end->

 //在page.js 就是要弹窗的时候禁止同步弹窗滚动的页面
Page({
  data: {
  /*
	  <scroll-view   class="scroll-view"
      catchscroll="scrollFn"
      scroll-y="{{isSorll}}" 
	*/
	//控制视图是否滚动 ture 滚动 false 不滚动
    isSorll:true,
  },
  onLoad({ id, recordTypeNo }) {
    var app = getApp();
    app.myProvide = this.setScrollStatus;
    app.that = this;
  },
  setScrollStatus(isSorll){
    var app = getApp();
    //这里的this获取不到 当前page内的属性 所以之前要把this存入全局变量that中
    app.that.setData({
    	
      isSorll
     })
  },
});
<--end-->
//在组件的js文件中 点击弹窗之前禁用视图的滚动
Component({
	 handleShowModel() {
      
      var app = getApp();
      //显示弹窗之前禁用外层视图的滚动
      app.myProvide(false)
      //显示弹窗
      this.setData({
        isFlag: true
      })
    },
})