微信小程序（6）--獲取屏幕寬度及彈窗滾動與頁面滾動沖突

1.獲取屏幕寬度，並賦值給view

<view class="ships-img" style="height:{{windowWidth}}px;"></view>

wx.getSystemInfo({
      success: function (res) {
        // console.log(res.windowWidth)  屏幕寬度
        that.setData({
          windowWidth: res.windowWidth
        })
      }
    }) 

 

2.最近遇到自定義彈窗滾動問題，當文本頁面過長，同時自定義彈窗也過長，即兩者都需要滾動的時候，想要自定義彈窗滾動卻觸發的是頁面的滾動。

解決思路：在打開彈窗的時候，讓頁面不可滾動；關閉彈窗后，恢復頁面滾動。

<scroll-view scroll-y="{{isScroll}}"> 
  <view class="rootView">
      <view wx:for="{{arrayData}}" wx:key="" bindtap="showDialog" data-statu="open" class="inBoxVIew">
        <text>{{item}}</text>
      </view>
      <!--測試彈窗-->  
      <view class="dialogbox" bindtap="showDialog" data-statu="close" wx:if="{{isDialogShow}}"></view>  
      <!--dialog-->
      <view class="dialog" wx:if="{{isDialogShow}}">
        <view class="windowTitle">
          <text style="font-size:24px;">我是彈窗</text>
        </view>
        <view wx:for="{{dialogData}}" class="windowTable">
            <text>{{item.name}}</text>
        </view>
      </view> 
  </view>
</scroll-view>

Page {
  position: absolute;
  font-size: 36rpx;
  width: 100%;
  height: 100%;
  display: block;
  background: #fff;
} 

scroll-view { height: 100%; } 

.rootView{
  padding: 10rpx;
}

.inBoxVIew{
  padding:20rpx 0;
  text-align: center;
}

.dialogbox {  
  width: 100%;  
  height: 100%;  
  position: fixed;  
  top: 0;  
  left: 0;  
  z-index: 1000;  
  background: rgba(0, 0, 0, 0.6);
  overflow: hidden;  
}
  
.dialog {
  width: 80%;
  height: 50%;  
  position: fixed; 
  top:50%;
  left:50%;
  margin-top:-25%;
  margin-left:-40%;
  z-index: 1001;  
  background: #FAFAFA;
  border-radius: 3px;
  overflow-y: scroll;
}

.windowTable{
  width: 98%;
  background: white;
  margin: 0 10rpx;
  padding:10rpx 0;
}

.windowTitle{
  width: 100%;
  text-align: center;
}

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    arrayData: null,
    dialogData: null,
    isDialogShow: false,
    isScroll: true
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {

    //構建測試數據
    let data = new Array();
    let dialog = new Array();
    for (let i = 0; i < 25; i++) {
      data[i] = '點擊我，測試' + i;
      dialog[i] = {
        name: '我是彈窗-' + i,
        isSelected: false
      };
    }
    this.setData({
      arrayData: data,
      dialogData: dialog
    });
  },

  /**
   * 顯示、關閉彈窗
   */
  showDialog: function (e) {
    var currentStatu = e.currentTarget.dataset.statu;
    console.log('currentStatu:', currentStatu);
    //關閉  
    if (currentStatu == "close") {
      this.setData({
        isDialogShow: false,
        isScroll: true
      });
    }
    // 顯示  
    if (currentStatu == "open") {
      this.setData({
        isDialogShow: true,
        isScroll: false
      });
    }
  },

})