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


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脚本代码跑起来。
Jan 09 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
Javascript实现秒表计时游戏
May 27 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 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
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
python and or用法详解
2019/06/26 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
退休教师欢送会主持词
2014/03/31 职场文书
感恩教育活动总结
2014/05/05 职场文书
县级文明单位申报材料
2014/05/23 职场文书
英语教研活动总结
2014/07/02 职场文书
合作意向书
2014/07/30 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
家访教师心得体会
2016/01/23 职场文书
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers