小程序之 fixed定位下scroll-view左右滚动失效

红框为悬浮 左右可以滑动 效果如下??

悬浮把最外层position:fixed;top:0;这个时候上面的导航就可以悬浮

但是会出现左右滑动不了的情况

这是因为我没给设置宽度

这个时候我们把包着scroll-view的那个view设置宽度为100%就可以了

.hd {
  width: 100%;
  z-index: 1;
  position: fixed;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}

原文地址:https://www.cnblogs.com/liancat/p/10570931.html

时间: 2024-10-17 05:00:34

小程序之 fixed定位下scroll-view左右滚动失效的相关文章

微信小程序后台持续定位功能使用

微信小程序团队在7月30日更新了 基础库 2.8.0 其中新添加了小程序后台持续定位功能和联系定位的接口 从上到下分别是 1.wx.onLocationChange//监听位置实时变化 2.wx.stopLocationUpdate//关闭监听实时位置变化,前后台都停止消息接收 3.wx.startLocationUpdate//开启小程序进入前台时接收位置消息 4.wx.startLocationUpdataBackground//开启小程序进入前后台时均接收位置消息 详细信息可查看https

微信小程序-自定义QQ版下拉刷新

最近给别个公司做技术支持,要实现微信小程序上拉刷新与下拉加载更多 微信给出的接口不怎么友好,最终想实现效果类似QQ手机版 ,一共3种下拉刷新状态变化,文字+图片+背景颜色 最终实现后的效果(这里提示有个不同点就是,自定义了导航条,并且下拉的时候,自定义导航条必须固定) 小程序实现下拉加载2种方式: 1. 简单粗暴,直接开启enablePullDownRefresh,开启全局下拉刷新 2.利用scroll-view组件 简单分析下2种方式的利与弊 enablePullDownRefresh方式 优

小程序map多点定位显示

最近在做小程序的时候有一个类似共享单车显示附近单车的需求.查了查微信api发现api里多点定位描述的不清晰,试了试也不可以.静下心踩了几个坑后写了几个方法.分享一下??附上代码 html结构: <map id="map" scale="{{scale}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap&quo

微信小程序实现城市定位:获取当前所在的国家城市信息

微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是当前位置的经纬度.如果我们想获取当前位置是处于哪个国家,哪个城市等信息,该如何实现呢? 微信小程序中并没有提供这样的API,但是没关系,有wx.getLocation()得到的经纬度作为基础就够了,其他的,我们可以使用其他第三方地图服务可以来实现,比如腾讯地图或百度地图的API. 以腾讯地图为例,我们可以去腾讯地图开放平台注册一个账号,然后在它的管理后台创建一个密钥(key). 然后在顶部菜单里

小程序,会是下一个创业风口吗

小程序,创业者们的狂躁与迷思 记得在16年的9月份,就有消息说微信推出的小程序,一时间大家对于小程序的关注就从来没有减少过.或许是经过15年移动互联网大潮之后,16年互联网一下子寂静了许多的原因,大家对于小程序给予了很高的期望.我也从那时候起开始研究小程序,并且在12月的那次内测中,我也如愿的尝试了一把小程序的开发. 说实话,当时看着小程序的开发文档,惊艳了一下,呀,项目结构如此清晰,逻辑也是相当的清楚,一时间对微信平台架构的大神们膜拜了一下.相比原生的Android.ios开发,确实方便了不少

京东小程序888元礼品卡免费送,为商家免费定制“小程序”助力连接线上线下

文末进入→ 京东礼品卡活动入口   一.京东小程序累计近1.7亿用户领跑社交电商,小程序必将成未来十年的移动互联网趋势! 618大促高潮刚刚过去,阿拉丁研究院发布了首份<618小程序电商行业报告>报告显示,618期间电商小程序新增用户数达5302万余人,访问次数超10亿次,分享累计次数达8432万. 这其中京东购物小程序从上线截止到18日累计用户数近1.7亿,访问人次同比去年618增长超过46倍,下单用户数同比去年增长达66倍. 通过京东小程序上述数据,确实让我们看到了小程序的具大潜力.小程序

小程序 上拉刷新/下拉加载

小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式 onPullDownRefresh()  //用户下拉刷新事件,onReachBottom() //用户上拉触底事件 onPullDownRefresh和onReachBottom是小程序的页面事件,官方文档描述"需要在app.json的window选项中或页面的json文件中开启enablePullDownRefres

微信小程序上拉、下拉、动态设置窗口背景色

一.enablePullDownRefresh 1.下拉刷新enablePullDownRefresh的支持 单页面配置json文件 { "enablePullDownRefresh": true } app.json配置(所有页面都带有下拉刷新功能) { "window": { "enablePullDownRefresh": true } } 2.设置backgroundTextStyle大家会发现别人的小程序下拉刷新是有三个点闪烁的动画.自

微信小程序scroll-view不能实现下拉刷新

一般在列表展示页面,会使用到上拉加载和下拉刷新功能,在scroll-view中有bindscrolltolower事件,可以实现上拉加载功能,但是却没法实现下拉刷新. 如需同时使用两种功能,解决步骤如下(以list页面为例): 1. 将scroll-view 改成普通的view, 并且设置样式 // list.wxsspage { height: 100%; } .container { width: 100%; height: 100%; // 或者 height: 100vh; } // 其