快捷導(dǎo)航

小程序開(kāi)發(fā)踩坑：頁(yè)面窗口定位（相對(duì)于瀏覽器定位）（推薦）

更新時(shí)間：2019年04月25日 09:08:01 作者：C_舊城以西

這篇文章主要介紹了小程序開(kāi)發(fā)頁(yè)面窗口定位，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

開(kāi)發(fā)中我們要做一些類(lèi)似遮罩層或者頁(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">扣車(chē)主分</view>
 </view>

/*--頁(yè)面fixed定位層--*/
.pageHead{
 position: fixed;
 top: 0;
 width:100%;
 background-color:#fff;
	 z-index: 10;
}

以上所述是小編給大家介紹的小程序開(kāi)發(fā)頁(yè)面窗口定位詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

TypeScript中Module使用區(qū)別及模塊路徑解析規(guī)則
這篇文章主要為大家介紹了TypeScript中Module使用區(qū)別及模塊路徑解析規(guī)則，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
微信小程序本地圖片按照屏幕尺寸處理
這篇文章主要介紹了微信小程序本地圖片按照屏幕尺寸處理的相關(guān)資料,這里提供具體實(shí)現(xiàn)步驟，需要的朋友可以參考下
2017-08-08
微信小程序購(gòu)物車(chē)簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序購(gòu)物車(chē)簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下
2016-10-10
js前端埋點(diǎn)監(jiān)控解析
本文針對(duì)埋點(diǎn)系統(tǒng)和監(jiān)控系統(tǒng)的融合的一點(diǎn)進(jìn)行簡(jiǎn)單的介紹與探索，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
JavaScript構(gòu)造函數(shù)與原型之間的聯(lián)系
這篇文章主要介紹了JavaScript構(gòu)造函數(shù)與JavaScript原型，構(gòu)造函數(shù)是一種特殊的函數(shù)，主要用來(lái)初始化對(duì)象，即為對(duì)象成員變量賦初始值，它總與?new?一起使用，構(gòu)造函數(shù)通過(guò)原型分配的函數(shù)是所有對(duì)象所共享的。下面來(lái)看看文章的集體介紹內(nèi)容吧
2021-12-12
詳解使用koa2完成Excel導(dǎo)入導(dǎo)出
這篇文章主要為大家介紹了詳解使用koa2完成Excel導(dǎo)入導(dǎo)出示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
微信小程序彈幕功能簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序彈幕功能簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下
2017-02-02
制作特殊字的腳本
制作特殊字的腳本...
2006-06-06
JS前端使用canvas搞一個(gè)手勢(shì)識(shí)別
這篇文章主要為大家介紹了JS前端使用canvas搞一個(gè)手勢(shì)識(shí)別的實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
微信小程序獲取循環(huán)元素id以及wx.login登錄操作
這篇文章主要介紹了微信小程序獲取循環(huán)元素id以及wx.login登錄操作的相關(guān)資料,這里提供實(shí)例幫助大家實(shí)現(xiàn)該功能，需要的朋友可以參考下
2017-08-08