小程序開發(fā)踩坑：頁面窗口定位（相對于瀏覽器定位）（推薦）
更新時間：2019年04月25日 09:08:01 作者：C_舊城以西
這篇文章主要介紹了小程序開發(fā)頁面窗口定位，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
開發(fā)中我們要做一些類似遮罩層或者頁面header固定而頁面內(nèi)容滾動的效果時，往往會使用到：position: fiexd;屬性，但是往往會出現(xiàn)綁定在定位元素上的事件無法觸發(fā)，原因出現(xiàn)在哪里？
經(jīng)過摸索，終于找到答案：元素定位之后， z-index的值默認(rèn)還是0，又因為定位而導(dǎo)致元素脫離了原來的文檔流（page頁面層）,所以，定位元素相對于用戶來說，雖然看得見，但是就像已經(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>
/*--頁面fixed定位層--*/
.pageHead{
position: fixed;
top: 0;
width:100%;
background-color:#fff;
z-index: 10;
}
以上所述是小編給大家介紹的小程序開發(fā)頁面窗口定位詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
前端從開發(fā)到部署前都離不開 Webpack 的參與，本文結(jié)合了我們自己在開發(fā)中碰到的種種問題解決方案，同時借鑒了很多開源項目的配置來介紹一種用 3 個 JS 文件來配置 Webpack 的方法。2017-09-09
這篇文章主要介紹了微信小程序 UI與容器組件總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了微信小程序 MINA文件結(jié)構(gòu)的相關(guān)資料,這里詳細(xì)介紹了微信小程序的文件目錄及文件作用，需要的朋友可以參考下2016-10-10
本地存儲localStorage設(shè)置過期時間示例詳解
這篇文章主要為大家介紹了本地存儲localStorage設(shè)置過期時間示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了微前端框架qiankun的源碼剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了微信小程序 Storage API實例詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了JavaScript高級程序設(shè)計之基本引用類型，引用值（對象）都是某個特定的引用類型的實例對象，例如 Date類型、Function類型，RegExp 正則表達式類型等等。JavaScript內(nèi)置了一些常用的引用類型給開發(fā)者使用。下面來看看文章詳細(xì)內(nèi)容2021-11-11
這篇文章主要為大家介紹了高級前端必會的package.json字段知識詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
微信小程序 wx.uploadFile在安卓手機上面the same task is working問題解決
這篇文章主要介紹了微信小程序 wx.uploadFile在安卓手機上面the same task is working問題解決的相關(guān)資料,需要的朋友可以參考下2016-12-12
fs-extra實現(xiàn)yarn?create?tlist創(chuàng)建示例詳解
這篇文章主要為大家介紹了fs-extra實現(xiàn)yarn?create?tlist創(chuàng)建示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01