zoukankan      html  css  js  c++  java
  • 解决小程序点击弹出模态框,子父级都有滚动条问题

     1 var app = getApp()
     2 
     3 Page({
     4   data: {
     5     isScroll: true,
     6     showView:false,
     7     winHeight:0
     8   },
     9   onLoad:function(options){
    10     showView: (options.showView == "true" ? true : false);
    11     var that = this;
    12     //  高度自适应
    13     wx.getSystemInfo({
    14       success: function (res) {
    15         var clientHeight = res.windowHeight,
    16           clientWidth = res.windowWidth,
    17           rpxR = 750 / clientWidth;
    18         console.log(clientHeight)
    19         var calc = clientHeight * rpxR-100;
    20         console.log(calc)
    21         that.setData({
    22           winHeight: calc
    23         });
    24       }
    25     })
    26   },
    27   showModel:function (e) {
    28     this.setData({
    29       showView:true,
    30       isScroll:false,
    31     })
    32   },
    33   cancel:function(){
    34     this.setData({
    35       showView: false,
    36       isScroll: true,
    37     })
    38   }
    39 })
    //css文件
    ::-webkit-scrollbar{
       0;
      height: 0;
      color: transparent;
    }
    .hide{
      display: none
    }
    .show{
      display: block;
    }
    scroll-view{
      100%;
      height:100%;
    }
    #cientWill{
      position: fixed;
       750rpx;
      height: 100vh;
      overflow: auto;
      padding: 0 20rpx;
      top: 0;
      left: 0;
      background:#fff;
      z-index: 999;
    }
    

      

    <view class="cusEdit">
     <scroll-view scroll-y="true"  style="height:{{winHeight}}rpx">  
    
         <view  class="form-group first">
                 <ul class="basicMsg">
                    <li data-type="text" class="">
                        <view class="li-inner ">
                            <span class="k">姓名</span> <span class="v"><input name="custName" placeholder="请输入姓名" type="text" ></input></span>
                        </view>
                    </li>
                    <li data-type="text" class="">
                        <view class="li-inner ">
                            <span class="k">意向级别</span> <span class="v"><button name="custName" placeholder="请选择" type="text" bindtap='showModel'>请选择</button></span>
                        </view>
                    </li>
                </ul>
         </view>
     </scroll-view>  
    //这个是子级内容
     <scroll-view>  
        <view id='cientWill' class="hide{{showView?'show':''}}">
        </view>
     </scroll-view>
    </view>
    

      

    贴出主要代码,

    思考步骤:
    1.使用<scroll-view>作为根节点包裹所有view,并动态绑定scroll-view的scroll-y属性<scroll-view scroll-y="{{isScroll}}">,自定义它的高度,var calc = clientHeight * rpxR-100; “-100”是因为我底部有选项卡,你若不需要就不永用减;
    2.点击button按钮触发showModel事件,子级内容显示,更改isScroll的值为false,关闭弹窗的点击事件中,更改isScroll的值为true

  • 相关阅读:
    BZOJ3674 可持久化并查集加强版
    BZOJ2588 Spoj 10628. Count on a tree
    BZOJ1300 [LLH邀请赛]大数计算器
    BZOJ3261 最大异或和
    BZOJ1605 [Usaco2008 Open]Crisis on the Farm 牧场危机
    BZOJ3524 [Poi2014]Couriers
    BZOJ2127 happiness
    JZOJ__Day 7:【普及模拟】蚂蚁
    JZOJ__Day 6:【普及模拟】神奇的项链(fett)
    JZOJ__Day 6:【普及模拟】团队背包(team)
  • 原文地址:https://www.cnblogs.com/jiayeyuan/p/8385942.html
Copyright © 2011-2022 走看看