• 在iOS系统上失效,自己网上搜了一些解决办法,解决办法如下: 需要滑动的class为content .wanttoscroll{ position: fixed; top: 0; left: 0; bottom: 180px; /*距离底部的距离为底部盒子的高度,自己也可...

    position:fixed;在iOS系统上失效,自己在网上搜了一些解决办法,解决办法如下:
    需要滑动的class为content

    .wanttoscroll{
                position: fixed;
                top: 0;
                left: 0;
                bottom: 180px; /*距离底部的距离为底部盒子的高度,自己也可以设置*/
                overflow-y: scroll;
                width: 100%;
                height: auto;
                -webkit-overflow-scrolling: touch;  
    }
    

    需要固定的class为.wanttofix

    .wanttofix{
                position: fixed;
                transform: translateZ(0);
                bottom: 0;
                height: 180px;
            }
    

    说明:-webkit-overflow-scrolling: touch; 这个要加,让ios滑动更顺滑,否则会卡顿。
    css中如果有用到transform也会导致fixed失效,此时给元素添加一个transform:translateZ(0);
    目的是为了开启GPU硬件加速,提高性能和流畅的动画效果。如果用到translate;把translate换成translate3d,在原来的参数后面加个Z方向的平移 0即可;

    注意:使用transform的时候会改变页面的层叠关系,最受影响的就是z-index这个属性,即使fixed布局设置了及其高的z-index值,也是会被transform的层叠关系影响而被遮盖!所以看不到的时候可以考虑下这个因素

    展开全文
  • 如题, 最开始我使用的是position:fixed 发现两种设备上都无效,后来百度改用 background-attachment:fixed安卓效果正常,可到了IOS上又完蛋了。 我知道UI设计的开发, 背景固定是很常用的一个显示方法,...
  • 如果不设置top和left的话 就会出现不显示问题 转载于:https://www.cnblogs.com/ckAng/p/9443333.html

    如果不设置top和left的话  就会出现不显示问题

    转载于:https://www.cnblogs.com/ckAng/p/9443333.html

    展开全文
  • 小程序使用scroll-view时,低版本的IOS中scroll-view中使用fixed时会把scroll-view盖住,导致不能滑动。 解决方法时,将fixed元素和scroll-view外套一个标签,将fixed元素和scroll-view设为同级,都只有...

    在做小程序使用scroll-view时,低版本的IOS中,在scroll-view中使用fixed时会把scroll-view盖住,导致不能滑动。

    解决方法时,将fixed元素和scroll-view外套一个标签,将fixed元素和scroll-view设为同级,都只有绝对定位,不要使用fixed即可。

    展开全文
  • 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view。 当scrollview组件上滑动时,这个view会疯狂抖动。 直接上图吧: 下面是简化后的代码: <view class="main"> <scroll-view ...

    问题现象

    这个问题是最近在优化小程序代码时发现的。

    在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view。

    当在scrollview组件上滑动时,这个view会疯狂抖动。

    直接上图吧:

    746209-20190729151321558-2033002447.gif

    下面是简化后的代码:

    <view class="main">
      <scroll-view scroll-y="{{true}}" bindscroll="handleScroll" style="height:100%;" >
        <view>
            <view class="weui-navbar navbar-fixed">
              我是头部fixed元素
            </view>
            <view>
              这里是一大段test文字,用于占位
            </view>
        </view>
      </scroll-view>
    </view>

    猜测与验证

    原生组件?

    这个现象在没有简化代码前,我以为我是哪里用了什么原生组件。

    因为原生组件在ios下的定位缓慢,导致了这个问题的出现。

    但是当我的代码简化到上面这一步的时候,发现并没有应用原生组件。

    ios下橡皮筋功能的影响?

    问题在于我去掉了scroll-view后,滚动得不错,这个头部fixed的元素并没有抖动。

    确定是scroll-view组件下fixed元素随着滑动就会抖动

    到这一步我就确定了问题的原因,所以当然我是要先百度一下答案的。

    于是我果然发现了一堆难兄难弟:ios下scroll-view中fixed元素无法固定

    貌似他们遇到的问题比我还严重啊,都像一条咸鱼一样跟着滚了,而我的只是得了帕金森。

    简单场景解决方案

    上面的问题还没有官方人员回答。

    不过最好的解决方案其实就是将fixed元素移出scroll-view,这个没什么好多说的。

    元素都fixed了,没道理还要放在scroll-view中是吧?

    复杂场景解决方案

    既然说了上面是简单场景,那么就肯定有复杂场景嘛。

    我元素都fixed了,确实是没道理要放在一个scroll-view元素中包裹着。

    但是有的事就是这么没道理啊。

    就比如我的微信小程序肯定没有示例这么简单,里面这个fixed元素不能移出去。

    因为这个元素的fixed状态并不是固定的,最开始他需要跟随页面一起滚动,当和顶部贴紧后,它就变成fixed了。

    废话少说,现在就说一下我的解决方案的思路:

    既然要随着页面一起滚动,那么肯定是要保证这个元素在scroll-view中的。

    而scroll-view中的fixed元素肯定会抖,所以这个元素又一定要放在scroll-view外。

    看似鱼与熊掌不可兼得,实际上我们搞两个人一人取鱼,一人取熊掌就好了嘛。

    我们可以在scroll-view外设置一个同样的元素,并将其设置为fixed,并且隐藏。

    当scroll-view内部的元素贴紧顶部后,将内部的元素隐藏,再显示外部的元素即可。

    以下是实现代码:

    index.wxml:

    <view class="main">
      <view class="navbar navbar-fixed" hidden="{{scrollTop<=initTop}}">
        我是头部fixed元素
      </view>
      <scroll-view scroll-y="{{true}}" bindscroll="handleScroll" style="height:100%;" >
        <view>
            <view>
              这里是一大段test文字,用于占位
            </view>
            <view id="navbar" class="weui-navbar navbar-fixed" hidden="{{scrollTop>initTop}}">
              我是头部fixed元素
            </view>
            <view>
              这里是一大段test文字,用于占位
            </view>
        </view>
      </scroll-view>
    </view>

    index.js:

    Page({
      data: {
        initTop: 0,
        scrollTop: 0,
      },
      onLoad: function (options) {
        let query = wx.createSelectorQuery()
        query.select('#navbar').boundingClientRect()
        query.exec((res) => {
          this.setData({
            initTop: res[0].top
          })
        })
      },
      handleScroll: function (e) {
        this.setData({ scrollTop: e.detail.scrollTop })
      }
    })

    index.wxss:

    .navbar-fixed {
      position:fixed;
      width:100%;
      top:0;
      left:0;
      z-index:100;
    }
    .navbar{
      height:80rpx;
      line-height: 80rpx;
      background:red;
      text-align: center;
      color: #fff;
    }

    隐藏BUG与修复

    以上代码如果快速滑动是没有问题,但是当红色头部元素快要贴紧顶部时慢速滑动就会出现一个很诡异的现象:

    红色头部元素往下弹动,始终不能贴紧顶部。

    而实际上不是红色头部元素往下弹动,而是红色头部元素贴紧顶部后,此时内部头部元素隐藏,那么scrollTop立刻变小。

    因为scrollTop变小,小于了initTop,那么内部头部元素再次出现,于是就这样不断循环。

    我们这里需要明白hidden实际上是一个display:none的效果,所以这里我们对内部元素的隐藏不能用hidden,而是用visibility:hidden。

    这样的话,这个内部元素就只是看不见了而已,并且页面上显示为背景色(这里我们假设是白色),但是还是占用了那么多的空间。

    那么scrollTop就不会突然间变小,也就不会造成BUG。

    同时,外部的元素会在内部元素变成白色矩形时直接出现,覆盖在内部元素上面,那么内部元素隐藏所造成的白色区域实际上就被外部元素遮挡住了。

    当用户在使用时,完全不会感知到内部元素这个白色区域的存在。

    好了,这里我们给出修改后的代码:

    <view class="main">
      <view class="navbar navbar-fixed" hidden="{{scrollTop<=initTop}}">
        我是头部fixed元素
      </view>
      <scroll-view scroll-y="{{true}}" bindscroll="handleScroll" style="height:100%;" >
        <view>
            <view>
              这里是一大段test文字,用于占位
            </view>
            <view id="navbar" class="weui-navbar navbar-fixed" style="visibility:{{scrollTop>initTop?'hidden':'initial'}}">
              我是头部fixed元素
            </view>
            <view>
              这里是一大段test文字,用于占位
            </view>
        </view>
      </scroll-view>
    </view>

    总结

    方法蠢是蠢了点,但是好用啊。

    而且万一哪天微信小程序修复了这个问题,咱们的方案不会出问题,替换起来也很简单。

    转载于:https://www.cnblogs.com/vvjiang/p/11265206.html

    展开全文
  • page:{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } 将 page 也设置成固定定位即可
    page:{
    	  position: fixed;
    	  top: 0;
    	  left: 0;
    	  right: 0;
    	  bottom: 0;
    	  overflow: hidden;
    }
    

    将 page 也设置成固定定位即可

    展开全文
  • 开发小程序的时候,用到了echart。echart是用canvas画的。在小程序里面层级是最高的。所以出现了这个问题: 而实际图是这样的: 也就是说手指滑动图表的时候。整个图会上滑动。 问题原因: 页面布局用了...
  • html页面的错误提醒,是动态提示的,一开始是隐藏的<p class="err-p red-color"></p>... function error(text){ var u = navigator.userAgent, app = navigator.appVersion; var isiOS = !!u.match(/\(i[^;]+;( U;)?
  • 最近小程序进行一些优化,发现 scroll-view 的两处问题 1、IOS手机下scroll-view会存在上拉加载时卡顿情况 暂时解决方法(设置高度为100%,问题:设置后不能触发上拉触底事件): <scroll-view scroll-y="true...
  • 微信小程序中,position:fixed不能和wx.createAnimation一起用,如果放在一起使用的话,position:fixed会不起作用
  • 移动端开发的时候,为了适配ios和安卓的不同机型的问题,我们做过很多的处理,可以通过分别接入h5的页面是从那种系统进入的方式判别ios和安卓。 但是,当我们移动端的悬浮一个按钮的时候,ios设备上,底部的...
  • 当进入全屏的时候,底部fixed固定的tab栏会遮挡视频,返回之后会出现两个tab栏 解决方案,给tab栏设置一个属性,当进入全屏事件的时候tab栏的display设置为none,当退出的时候tab栏的display为block...
  • 1.margin在IOS中失效 页面中元素使用margin值,某些IOS设备下会出现失效的情况,而安卓机则正常显示,此问题暂无直接的解决方案,当前使用空DIV控制间距。 2.fixed定位问题 整个页面的fixed定位,ios下下拉...
  • 1.可以通过page设置overflow-x:hidden属性 page{ width: 100%; height: 100%; overflow-x: hidden; } 如果不行此方法不行,可页面除了最...2.可以page添加position:fixed属性 page{ width: 100%; ...
  • 解决方法: 对应页面的.json文件添加。 { "disableScroll": true ...官网描述:设置为true则页面...只页面配置有效,无法app.json设置该项 转载于:https://www.cnblogs.com/543zzh/p/9516486.html...
  • 微信小程序开发ios系统出现了这个bug,android手机都没有出现,所以将两者改为同级,需要在上一层层级的元素的定位为absolute(有时候也不一定要改成absolute,但是一定要处于同层级) ...
  •  的元素时。 会发现这个 textarea 也会跟着固定位置,但是 textarea 的 placeholder 内容不会固定,当滚动页面时,placeholder 的内容会跟着滚动。 如何解决呢? 给 textarea 增加属性 fixed
  • 可以看到下面两张图,图1搜索框为fixed固定顶部,滚动没有任何问题。 图2当光标进入搜索框时,ios自作聪明的把光标定位到中间,并且fixed属性被自动修改成了absolute。此时注意滚动页面的话,会发现原本fixed的...
1 2 3 4 5 ... 20
收藏数 5,767
精华内容 2,306