麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 課堂 > 小程序 > 正文

微信小程序自定義彈窗滾動與頁面滾動沖突的解決方法

2020-03-21 15:51:32
字體:
來源:轉載
供稿:網友

本文為大家分享了微信小程序自定義彈窗滾動與頁面滾動沖突的解決方法,供大家參考,具體內容如下

先看效果是否是自己需要的

微信小程序,彈窗滾動,頁面滾動,沖突

實現步驟:

1.整個布局用作為根節點包裹所有view,并動態綁定scroll-view的scroll-y屬性
2.樣式文件中設置Page的overflow-y屬性值為hidden
3.樣式文件中設置scroll-view的height屬性值為100%
4.打開自定義彈窗的點擊事件中,更改isScroll的值為false,關閉彈窗的點擊事件中,更改isScroll的值為true

JS:

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   });  } }})

wxml:

<button>做點什么</button><scroll-view scroll-y="{{isScroll}}">  <view class="rootView">  <view class="inTable">   <view wx:for="{{arrayData}}" wx:key="" class="unitItemLeft" bindtap="showDialog" data-statu="open">    <input class="baseItemWithBorder" value="{{item}}" disabled />   </view>  </view> </view></scroll-view><!--測試彈窗--> <view class="dialogMarsk" bindtap="showDialog" data-statu="close" wx:if="{{isDialogShow}}"></view>  <!--dialog--><view class="dialog" wx:if="{{isDialogShow}}"> <view class="appreciationTitle">  <text style="font-size:24px;">我是彈窗</text> </view> <view wx:for="{{dialogData}}" class="appreciationTable">  <view class="unitItemLeft">   <text class="baseItemWithBorder">{{item.name}}</text>  </view> </view></view> 

wxss:

Page { position: absolute; font-size: 36rpx; width: 100%; height: 100%; display: block; background: #FAFAFA; overflow-y: hidden;} scroll-view { height: 100%;} .rootView{ /* width: 100%; */ padding: 10rpx; display: flex; flex-direction: column;}.baseItemWithBorder{ flex-grow: 1; height: 100%; padding-left: 20rpx; padding-right: 20rpx; border-bottom: solid 1rpx gainsboro;}.inTable{ width: 100%; display: flex; box-shadow:5px 5px 10px gray; flex-direction: column; margin-top: 40rpx; background: white;}.inDetail{ width: 100%; height: 80rpx; display: flex;}.unitLeft{ justify-content: flex-start; padding-left: 20rpx;}.unitItemLeft{ width: 100%; height: 80rpx; display: flex; flex-direction: row;}.dialogMarsk {  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: 10%; z-index: 1001;  background: #FAFAFA; border-radius: 3px; overflow-y: scroll;}.appreciationTable{ width: 98%; display: flex; flex-direction: column; background: white; margin: 0 10rpx;}.appreciationTitle{ width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 20rpx; margin-bottom: 20rpx;}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 狠狠99| 综合日韩av| 黄色片观看 | 亚洲综合一区在线观看 | 黄色大片免费看 | 国产精品成人免费一区久久羞羞 | 欧美另类在线视频 | 全黄裸片武则天艳史 | 免费啪视频在线观看 | 精品一区二区免费视频视频 | 免费观看一级黄色片 | 91美女啪啪 | 国产无遮挡一级毛片 | 免费人成年短视频在线观看网站 | 天天鲁在线视频免费观看 | 欧美特黄a | 中文在线国产 | 免费国产一级淫片 | 福利在线国产 | av电影免费在线看 | 三级国产三级在线 | 二区三区四区视频 | 99影视在线视频免费观看 | 国产羞羞网站 | 欧美a级在线免费观看 | www.91操 | 99最新网址 | 成人在线视频免费播放 | 国产亚洲精品久久久久久网站 | 美国一级毛片片aa久久综合 | 国产噜噜噜| 特级毛片a级毛片100免费 | 美女被免费网站在线软件 | 欧美成人黄色小视频 | 特级黄一级播放 | 91成人久久 | 日本教室三级在线看 | 日韩欧美视频一区二区三区 | 久草视频福利在线观看 | 亚洲福利在线免费观看 | 97zyz成人免费视频 |