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


Posted in Javascript onApril 25, 2019

开发中我们要做一些类似遮罩层或者页面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;
}

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

Javascript 相关文章推荐
JS上传前预览图片实例
Mar 25 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
Vue动态组件实例解析
Aug 20 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 #Javascript
微信小程序实现的五星评价功能示例
Apr 25 #Javascript
微信小程序实现单列下拉菜单效果
Apr 25 #Javascript
Vue组件通信的几种实现方法
Apr 25 #Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 #Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 #Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 #Javascript
You might like
php发送post请求函数分享
2014/03/06 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
为Python程序添加图形化界面的教程
2015/04/29 Python
python遍历目录的方法小结
2016/04/28 Python
Python的re模块正则表达式操作
2016/05/25 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
pandas中ix的使用详细讲解
2020/03/09 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
中英文自我评价语句
2013/12/20 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书