国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

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

2019-11-19 11:10:38
字體:
來源:轉載
供稿:網友

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

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

實現步驟:

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

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

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 全椒县| 招远市| 来凤县| 通化市| 象山县| 云安县| 翁牛特旗| 临桂县| 同仁县| 资中县| 嘉定区| 天津市| 黑河市| 丰原市| 石柱| 灵宝市| 同江市| 洞口县| 桓台县| 梧州市| 万载县| 夹江县| 南漳县| 教育| 张家口市| 政和县| 郧西县| 杂多县| 颍上县| 榕江县| 泗水县| 卢龙县| 合江县| 高雄县| 玉环县| 岐山县| 九寨沟县| 望城县| 大新县| 西乌珠穆沁旗| 大丰市|