脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 小程序开发页面窗口定位

小程序开发踩坑：页面窗口定位（相对于浏览器定位）（推荐）

 更新时间：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;
}

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

您可能感兴趣的文章:

相关文章

  • 为什么我们要做三份 Webpack 配置文件

    为什么我们要做三份 Webpack 配置文件

    前端从开发到部署前都离不开 Webpack 的参与，本文结合了我们自己在开发中碰到的种种问题解决方案，同时借鉴了很多开源项目的配置来介绍一种用 3 个 JS 文件来配置 Webpack 的方法。
    2017-09-09
  • 微信小程序 UI与容器组件总结

    微信小程序 UI与容器组件总结

    这篇文章主要介绍了微信小程序 UI与容器组件总结的相关资料,需要的朋友可以参考下
    2017-02-02
  • 微信小程序 MINA文件结构

    微信小程序 MINA文件结构

    这篇文章主要介绍了微信小程序 MINA文件结构的相关资料,这里详细介绍了微信小程序的文件目录及文件作用，需要的朋友可以参考下
    2016-10-10
  • 本地存储localStorage设置过期时间示例详解

    本地存储localStorage设置过期时间示例详解

    这篇文章主要为大家介绍了本地存储localStorage设置过期时间示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • 微前端框架qiankun源码剖析之上篇

    微前端框架qiankun源码剖析之上篇

    这篇文章主要为大家介绍了微前端框架qiankun的源码剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • 微信小程序 Storage API实例详解

    微信小程序 Storage API实例详解

    这篇文章主要介绍了微信小程序 Storage API实例详解的相关资料,需要的朋友可以参考下
    2016-10-10
  • JavaScript高级程序设计之基本引用类型

    JavaScript高级程序设计之基本引用类型

    这篇文章主要介绍了JavaScript高级程序设计之基本引用类型，引用值（对象）都是某个特定的引用类型的实例对象，例如 Date类型、Function类型，RegExp 正则表达式类型等等。JavaScript内置了一些常用的引用类型给开发者使用。下面来看看文章详细内容
    2021-11-11
  • 高级前端必会的package.json字段知识详解

    高级前端必会的package.json字段知识详解

    这篇文章主要为大家介绍了高级前端必会的package.json字段知识详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • 微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决

    微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决

    这篇文章主要介绍了微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决的相关资料,需要的朋友可以参考下
    2016-12-12
  • fs-extra实现yarn create tlist创建示例详解

    fs-extra实现yarn create tlist创建示例详解

    这篇文章主要为大家介绍了fs-extra实现yarn create tlist创建示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01

最新评论