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


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 相关文章推荐
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
vue项目接口域名动态获取操作
Aug 13 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实现的连贯操作、链式操作实例
2014/07/08 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
JS实现手风琴特效
2020/11/08 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
股权转让意向书
2014/04/01 职场文书
学校个人对照检查材料
2014/08/26 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
大学生个人学习总结
2015/02/15 职场文书
个人向公司借款协议书
2016/03/19 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
Spring Boot 实现 WebSocket
2022/04/30 Java/Android