收藏
评论

IOS scroll-view中的自定义组件fixed问题官方

这个是正常现象,因为 iOS 下加了 -webkit-overflow-scrolling: touch,这个会产生滚动惯性,体验更好,但会改变 fixed 的行为,建议不在 scroll-view 里有 fixed 元素

137640浏览
最后一次编辑于  2020-04-23
知识库内容非实时更新,可能已过期、失效或不适用于当前情形,请谨慎参考
收藏
反馈

22 个评论

  • 社区技术运营专员-Jahozheng
    社区技术运营专员-Jahozheng
    置顶评论2022-06-23

    部分兼容方案

    可以加个试试呢 .wx-scroll-view {

    -webkit-overflow-scrolling: auto;

    }

    2022-06-23
    赞同 2
    回复 5
    • 姝妹妹🌝
      姝妹妹🌝
      2022-07-04
      还是无效诶
      2022-07-04
      回复
    • 社区技术运营专员-Jahozheng
      社区技术运营专员-Jahozheng
      2022-07-16
      避免同时使用position:fixed和-webkit-overflow-scrolling: touch;了,在iOS13上WKWebView对这两个属性应该是没有兼容好,属于系统问题
      2022-07-16
      回复
    • 闪闪发光
      闪闪发光
      2022-11-21
      微信的 root-portal 组件可以解决这个办法了,就是版本要求有点高
      2022-11-21
      回复
    • 2023-03-20
      亲测有效,不过样式要写在页面或者全局,不能写在组件里面
      2023-03-20
      2
      回复
    • 韩
      02-22
      -webkit-overflow-scrolling: auto;  放在全局确实能解决这个问题。
      02-22
      回复
  • ChenShiAi
    ChenShiAi
    2021-01-20

    既然不建议scroll-view里放fixed,那怎么不把bind:scroll事件给放出来,给开发者在普通的view上自定义scroll-view逻辑?



    2021-01-20
    赞同 21
    回复
  • Damon
    Damon
    2021-05-19

    2021年了还没解决这个问题

    2021-05-19
    赞同 8
    回复
  • 草场坡彭于晏😿
    草场坡彭于晏😿
    2022-10-20

    可以利用<root-portal>组件将需要fixed定位的view包裹起来,可以脱离文档流

    <root-portal wx:if="{{show}}" enable="{{true}}">
        <view style="position: fixed;left:0;top:0;"></view>
    </root-portal>
    

    https://developers.weixin.qq.com/miniprogram/dev/component/root-portal.html

    2022-10-20
    赞同 7
    回复 2
    • NaN
      NaN
      2023-02-10
      会有问题,如果这里面是个video.在安卓机下video黑屏
      2023-02-10
      回复
    • 小祥哥
      小祥哥
      2023-02-20
      感谢,解决了
      2023-02-20
      回复
  •  
     
    2021-12-01

    2021年12月1日18:00:56下班前过来鞭尸一下,一个bug留过年

    2021-12-01
    赞同 7
    回复
  • 乐皮
    乐皮
    2021-11-30

    这都要2022了,要不要解决下

    2021-11-30
    赞同 3
    回复
  • P.
    P.
    2020-11-26

    就不能把这个属性放出来吗?搞半天,改也改不了, 什么玩意,一堆bug

    2020-11-26
    赞同 3
    回复
  • 神乐
    神乐
    2022-09-20

    给大家写一个 不局限于navbar导航的的案例,适合做横向产品列表一类 ,去掉图片也可以做navbar导航。 帮助后生少走弯路,记得多看社区评论。

    HTML  
    
     <scroll-view class="scroll-table" scroll-x style="width: 100%">
       <view  wx:for="{{periphery}}" data-id="{{item.id}}" class="scroll_box" bindtap="isChoice">
          <view class="scroll_single">
            <image src="../../../resource/images/index/iconHome.png"></image>
            <text>{{item.name}}</text>
          </view>
       </view>
     </scroll-view>
    CSS
    .scroll-table {
      width100%;
      height: 160rpx;
      background: skyblue;
      padding: 14rpx 0;
      white-space: nowrap;
    }
    .scroll_box {
      display: inline-block;
      width: 24%;
      height: 150rpx;
      font-size: 30rpx;
      background: pink;
      margin-right: 20rpx;
    }
    .scroll_single {
      width100%;
      height: 150rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      color: rgb(979797);
    }
    JS
     periphery:[
     { id1name'老君山' },
     { id2name'恒山' },
     { id3name'泰山' },
     { id4name'衡山' },
     { id5name'华山' },
     { id6name'嵩山' }
    ],
    //跳转方法 
     isChoice(e) {
        let id = e.currentTarget.dataset.id;
        console.log(id);
        wx.navigateTo({
          // url: '跳转路径+携带id 例如',
          url'../peak/peak?id=' + id,
        })
      },
    
    


    2022-09-20
    赞同 2
    回复
  • Squirt1e
    Squirt1e
    2022-06-08

    2022年都快过半了,还能解决吗

    2022-06-08
    赞同 2
    回复
  •  
     
    2022-09-01

    就因为这个问题,我都不知道骂了多少句“lj苹果”了

    2022-09-01
    赞同 1
    回复

正在加载...

登录 后发表内容