小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)

 更新时间:2019年04月25日 09:08:01   作者:C_旧城以西  
这篇文章主要介绍了小程序开发页面窗口定位,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

开发中我们要做一些类似遮罩层或者页面header固定而页面内容滚动的效果时,往往会使用到:position: fiexd;属性,但是往往会出现绑定在定位元素上的事件无法触发,原因出现在哪里?

经过摸索,终于找到答案:元素定位之后, z-index的值默认还是0,又因为定位而导致元素脱离了原来的文档流(page页面层),所以,定位元素相对于用户来说,虽然看得见,但是就像已经“不存在”一样,所以必须设置值:z-index至少大于等于1,将定位元素暴露给用户,这样才能触发绑定在元素之上的事件。

<view class="pageHead">
 <view class="hedTop">
  <view class="headTab">
  <view class="tablab">违章条数</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;
}

以上所述是小编给大家介绍的小程序开发页面窗口定位详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • TypeScript中Module使用区别及模块路径解析规则

    TypeScript中Module使用区别及模块路径解析规则

    这篇文章主要为大家介绍了TypeScript中Module使用区别及模块路径解析规则,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 微信小程序 本地图片按照屏幕尺寸处理

    微信小程序 本地图片按照屏幕尺寸处理

    这篇文章主要介绍了微信小程序 本地图片按照屏幕尺寸处理的相关资料,这里提供具体实现步骤,需要的朋友可以参考下
    2017-08-08
  • 微信小程序 购物车简单实例

    微信小程序 购物车简单实例

    这篇文章主要介绍了微信小程序 购物车简单实例的相关资料,需要的朋友可以参考下
    2016-10-10
  • js前端埋点监控解析

    js前端埋点监控解析

    本文针对埋点系统和监控系统的融合的一点进行简单的介绍与探索,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • JavaScript构造函数与原型之间的联系

    JavaScript构造函数与原型之间的联系

    这篇文章主要介绍了JavaScript构造函数与JavaScript原型,构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用,构造函数通过原型分配的函数是所有对象所共享的。下面来看看文章的集体介绍内容吧
    2021-12-12
  • 详解使用koa2完成Excel导入导出

    详解使用koa2完成Excel导入导出

    这篇文章主要为大家介绍了详解使用koa2完成Excel导入导出示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 微信小程序 弹幕功能简单实例

    微信小程序 弹幕功能简单实例

    这篇文章主要介绍了微信小程序 弹幕功能简单实例的相关资料,需要的朋友可以参考下
    2017-02-02
  • 制作特殊字的脚本

    制作特殊字的脚本

    制作特殊字的脚本...
    2006-06-06
  • JS前端使用canvas搞一个手势识别

    JS前端使用canvas搞一个手势识别

    这篇文章主要为大家介绍了JS前端使用canvas搞一个手势识别的实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序获取循环元素id以及wx.login登录操作

    微信小程序获取循环元素id以及wx.login登录操作

    这篇文章主要介绍了微信小程序获取循环元素id以及wx.login登录操作的相关资料,这里提供实例帮助大家实现该功能,需要的朋友可以参考下
    2017-08-08

最新评论