微信小程序--獲取屏幕寬度及彈窗滾動(dòng)與頁(yè)面滾動(dòng)沖突
發(fā)布時(shí)間：2018-04-25 11:14 所屬欄目：小程序開(kāi)發(fā)教程
|
1.獲取屏幕寬度，并賦值給view
wx.getSystemInfo({
success: function (res) {
// console.log(res.windowWidth) 屏幕寬度
that.setData({
windowWidth: res.windowWidth
})
}
})
2.最近遇到自定義彈窗滾動(dòng)問(wèn)題，當(dāng)文本頁(yè)面過(guò)長(zhǎng)，同時(shí)自定義彈窗也過(guò)長(zhǎng)，即兩者都需要滾動(dòng)的時(shí)候，想要自定義彈窗滾動(dòng)卻觸發(fā)的是頁(yè)面的滾動(dòng)。 解決思路：在打開(kāi)彈窗的時(shí)候，讓頁(yè)面不可滾動(dòng)；關(guān)閉彈窗后，恢復(fù)頁(yè)面滾動(dòng)。
<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>
<!--測(cè)試彈窗-->
<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>
復(fù)制代碼
復(fù)制代碼
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({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
arrayData: null,
dialogData: null,
isDialogShow: false,
isScroll: true
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
//構(gòu)建測(cè)試數(shù)據(jù)
let data = new Array();
let dialog = new Array();
for (let i = 0; i < 25; i++) {
data[i] = '點(diǎn)擊我，測(cè)試' + i;
dialog[i] = {
name: '我是彈窗-' + i,
isSelected: false
};
}
this.setData({
arrayData: data,
dialogData: dialog
});
},
/**
* 顯示、關(guān)閉彈窗
*/
showDialog: function (e) {
var currentStatu = e.currentTarget.dataset.statu;
console.log('currentStatu:', currentStatu);
//關(guān)閉
if (currentStatu == "close") {
this.setData({
isDialogShow: false,
isScroll: true
});
}
// 顯示
if (currentStatu == "open") {
|
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源
碼云倉(cāng)庫(kù):
本文地址：http://m.u-renovate.com/wxmini/doc/course/24078.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún)：800182392 點(diǎn)擊咨詢(xún)
