公告列表
公告列表
收藏
评论

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

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

相关问答：
scroll-view包含的自定义组件中fixed元素层级问题？
158628浏览
最后一次编辑于  2020-04-23
知识库内容非实时更新，可能已过期、失效或不适用于当前情形，请谨慎参考
收藏
反馈

26 个评论

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

    部分兼容方案

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

    -webkit-overflow-scrolling: auto;

    }

    2022-06-23
    赞同 2
    回复 5
    • 社区技术运营专员-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
      赞 1
      回复
    • 一瓶
      一瓶
      04-24
      亲测有效，或者使用粘性布局
      04-24
      赞
      回复
  • ChenShiAi
    ChenShiAi
    2021-01-20

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



    2021-01-20
    赞同 23
    回复
  • 草场坡彭于晏😿
    草场坡彭于晏😿
    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
    赞同 9
    回复 2
    • NaN
      NaN
      2023-02-10
      会有问题,如果这里面是个video.在安卓机下video黑屏
      2023-02-10
      赞
      回复
    • 小祥哥
      小祥哥
      2023-02-20
      感谢,解决了
      2023-02-20
      赞
      回复
  • Damon
    Damon
    2021-05-19

    2021年了还没解决这个问题

    2021-05-19
    赞同 8
    回复
  • 　
    　
    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 {
  width: 100%;
  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 {
  width: 100%;
  height: 150rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: rgb(97, 97, 97);
}
JS
 periphery:[
 { id: 1, name: '老君山' },
 { id: 2, name: '恒山' },
 { id: 3, name: '泰山' },
 { id: 4, name: '衡山' },
 { id: 5, name: '华山' },
 { id: 6, name: '嵩山' }
],
//跳转方法 
 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
    回复
  •  X
     X
    2022-09-01

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

    2022-09-01
    赞同 1
    回复

正在加载...

请 登录 后发表内容