H5的滚动穿透

首次采用的方案是：在打开弹层后，给body添加model-open类, 弹层关闭后再移除该类。该方案在测试机 IOS、鸿蒙系统、xiaomiHyperOS（1.0.2.0）解决问题，但是在MIUI（11.0.3）未能解决。由于APP内使用的相同的webview，初步定位可能是由于系统版本影响到了X5内核在渲染时的表现。

.modal-open {
    overflow: hidden;
}

第一个方案具有一定的兼容性问题。故采用另外一种。设置body元素绝对定位，同时获取滚动高度， 设置body固定的滚动高度。

.modal-open {
    position： fixed；
}

基于第二个方案，生成了最终的解决方案：在vue中增加了滚动穿透的指令：

 directives: {
    fixed: {
      // inserted 被绑定元素插入父节点时调用
      inserted() {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'
      },
      // unbind 指令与元素解绑时调用
      unbind() {
        let body = document.body
        body.style.position = ''
        let top = body.style.top
        document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top)
        body.style.top = ''
      }
    }
  }

swiper.js设置循环后的坑：

在项目继续率的卡片需要进行左右切换，一开始不需要循环切换；没什么问题； 交互优化提出了需要循环滚动，带来了一下几个问题：

• 循环切换后，卡片上的点击事件消失
• 当前卡片居中展示， 相邻卡片本应该暂时部分视图在设置循环后消失了。
• swiper.js在循环后，内部的activeIndex和realIndex 不一致，在使用卡片下标获取数据的时候需要去做适配。

总结一下：继续率开发中带来了一些技术积累。同时也积累了swiper的使用以及滚动穿透相关的解决方案。

版权所有

版权归属：tuyongtao1

许可证：署名 4.0 国际 (CC-BY-4.0)