您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)小程序開(kāi)發(fā)頁(yè)面窗口定位是怎樣的,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
開(kāi)發(fā)中我們要做一些類似遮罩層或者頁(yè)面header固定而頁(yè)面內(nèi)容滾動(dòng)的效果時(shí),往往會(huì)使用到:position: fiexd;屬性,但是往往會(huì)出現(xiàn)綁定在定位元素上的事件無(wú)法觸發(fā),原因出現(xiàn)在哪里?
經(jīng)過(guò)摸索,終于找到答案:元素定位之后, z-index的值默認(rèn)還是0,又因?yàn)槎ㄎ欢鴮?dǎo)致元素脫離了原來(lái)的文檔流(page頁(yè)面層),所以,定位元素相對(duì)于用戶來(lái)說(shuō),雖然看得見(jiàn),但是就像已經(jīng)“不存在”一樣,所以必須設(shè)置值:z-index至少大于等于1,將定位元素暴露給用戶,這樣才能觸發(fā)綁定在元素之上的事件。
<view class="pageHead"> <view class="hedTop"> <view class="headTab"> <view class="tablab">違章條數(shù)</view> <view class="tabbody">6</view> </view> <view class="headTab"> <view class="tablab">罰款金額</view> <view class="tabbody">1200</view> </view> <view class="headTab"> <view class="tablab">違章扣分</view> <view class="tabbody">12</view> </view> </view> <view class="headBot"> <view class="hedBtnTab {{currentTab==0 ? 'activeNav':''}}" data-current="0" bindtap="swichNav">全部</view> <view class="hedBtnTab {{currentTab==1 ? 'activeNav':''}}" data-current="1" bindtap="swichNav">可辦理</view> <view class="hedBtnTab {{currentTab==2 ? 'activeNav':''}}" data-current="2" bindtap="swichNav">扣車主分</view> </view>
/*--頁(yè)面fixed定位層--*/ .pageHead{ position: fixed; top: 0; width:100%; background-color:#fff; z-index: 10; }
關(guān)于小程序開(kāi)發(fā)頁(yè)面窗口定位是怎樣的就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。