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


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 相关文章推荐
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
js实现简单音乐播放器
Jun 30 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 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
关于尾递归的使用详解
2013/05/02 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
Python如何实现单例模式
2016/06/03 面试题
计算机专业个人求职信范例
2013/09/23 职场文书
新闻专业本科生的自我评价分享
2013/11/20 职场文书
科级干部考察材料
2014/02/15 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
三八节标语
2014/06/27 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python
vue递归实现树形组件
2022/07/15 Vue.js