1.获取屏幕宽度，并赋值给view

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

  1. wx.getSystemInfo({
  2.       success: function (res) {
  3.         // console.log(res.windowWidth)  屏幕宽度
  4.         that.setData({
  5.           windowWidth: res.windowWidth
  6.         })
  7.       }
  8.     })

 

2.最近遇到自定义弹窗滚动问题，当文本页面过长，同时自定义弹窗也过长，即两者都需要滚动的时候，想要自定义弹窗滚动却触发的是页面的滚动。

解决思路：在打开弹窗的时候，让页面不可滚动；关闭弹窗后，恢复页面滚动。

  1. <scroll-view scroll-y="{{isScroll}}"> 
  2.   <view class="rootView">
  3.       <view wx:for="{{arrayData}}" wx:key="" bindtap="showDialog" data-statu="open" class="inBoxVIew">
  4.         <text>{{item}}</text>
  5.       </view>
  6.       <!--测试弹窗-->  
  7.       <view class="dialogbox" bindtap="showDialog" data-statu="close" wx:if="{{isDialogShow}}"></view>  
  8.       <!--dialog-->
  9.       <view class="dialog" wx:if="{{isDialogShow}}">
  10.         <view class="windowTitle">
  11.           <text style="font-size:24px;">我是弹窗</text>
  12.         </view>
  13.         <view wx:for="{{dialogData}}" class="windowTable">
  14.             <text>{{item.name}}</text>
  15.         </view>
  16.       </view> 
  17.   </view>
  18. </scroll-view>
  1. Page {
  2.   position: absolute;
  3.   font-size: 36rpx;
  4.   width: 100%;
  5.   height: 100%;
  6.   display: block;
  7.   background: #fff;
  8. } 
  10. scroll-view {
  11.    height: 100%; 
  12. } 
  13. .rootView{
  14.   padding: 10rpx;
  15. }
  17. .inBoxVIew{
  18.   padding:20rpx 0;
  19.   text-align: center;
  20. }
  22. .dialogbox {  
  23.   width: 100%;  
  24.   height: 100%;  
  25.   position: fixed;  
  26.   top: 0;  
  27.   left: 0;  
  28.   z-index: 1000;  
  29.   background: rgba(0, 0, 0, 0.6);
  30.   overflow: hidden;  
  31. }
  32.   
  33. .dialog {
  34.   width: 80%;
  35.   height: 50%;  
  36.   position: fixed; 
  37.   top:50%;
  38.   left:50%;
  39.   margin-top:-25%;
  40.   margin-left:-40%;
  41.   z-index: 1001;  
  42.   background: #FAFAFA;
  43.   border-radius: 3px;
  44.   overflow-y: scroll;
  45. }
  47. .windowTable{
  48.   width: 98%;
  49.   background: white;
  50.   margin: 0 10rpx;
  51.   padding:10rpx 0;
  52. }
  54. .windowTitle{
  55.   width: 100%;
  56.   text-align: center;
  57. }
  1. Page({
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     arrayData: null,
  8.     dialogData: null,
  9.     isDialogShow: false,
  10.     isScroll: true
  11.   },
  13.   /**
  14.    * 生命周期函数--监听页面加载
  15.    */
  16.   onLoad: function (options) {
  18.     //构建测试数据
  19.     let data = new Array();
  20.     let dialog = new Array();
  21.     for (let i = 0; i < 25; i++) {
  22.       data[i] = \'点击我，测试\' + i;
  23.       dialog[i] = {
  24.         name: \'我是弹窗-\' + i,
  25.         isSelected: false
  26.       };
  27.     }
  28.     this.setData({
  29.       arrayData: data,
  30.       dialogData: dialog
  31.     });
  32.   },
  34.   /**
  35.    * 显示、关闭弹窗
  36.    */
  37.   showDialog: function (e) {
  38.     var currentStatu = e.currentTarget.dataset.statu;
  39.     console.log(\'currentStatu:\', currentStatu);
  40.     //关闭  
  41.     if (currentStatu == "close") {
  42.       this.setData({
  43.         isDialogShow: false,
  44.         isScroll: true
  45.       });
  46.     }
  47.     // 显示  
  48.     if (currentStatu == "open") {
  49.       this.setData({
  50.         isDialogShow: true,
  51.         isScroll: false
  52.       });
  53.     }
  54.   },
  56. })

 

 

 

 

 

版权声明：本文为juewuzhe原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/juewuzhe/p/7942241.html