工作笔记：小程序中，标题固定到顶部在iphone手机中滑到底部出现闪烁的问题

需求：页面往上滚动，当红框内容位置滚动到页面顶部时，固定到顶部；反过来，页面往下滚动，当页面滚动高度小于红框内容距离顶部正常高度时（未固定到顶部），则脱离顶部固定。

实现：

//js
onPageScroll: function (e) {
    if(e.scrollTop >= this.data.tabScrollTop + 10){
      this.setData({
        tabFixed: true
      })
    } else {
      this.setData({
        tabFixed: false
      })
    }
  }

//wxml
<view class="tab-info {{tabFixed ? 'fixed':''}}">
  <view class="title">
    <text>动 态</text>
    <text>订 单</text>
  </view>
  <view class="hidden-box"></view>
</view>

//wxss
.tab-info > .title {
  display: flex;
  justify-content: space-around;
  height: 86rpx;
  padding: 0 84rpx;
  border-bottom: 2rpx solid #e6e6e6;
  background-color: #fff;
}
.tab-info.fixed > .title{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}


.tab-info .hidden-box{
  height: 0;
}
.tab-info.fixed .hidden-box{
  height: 88rpx;
}
或者
.tab-info .hidden-box{
  height: 88rpx;
  display: none;
}
.tab-info.fixed .hidden-box{
  display: block;
}

或者

//js
onPageScroll: function (e) {
    if(e.scrollTop >= this.data.tabScrollTop + 10){
      this.setData({
        tabFixed: true
      })
    } else {
      this.setData({
        tabFixed: false
      })
    }
  }

//wxml
<view class="tab-info {{tabFixed ? 'fixed':''}}">
  <view class="title">
    <text>动 态</text>
    <text>订 单</text>
  </view>
</view>
<view class="content {{tabFixed ? 'marT88':''}}"></view>

//wxss
.tab-info > .title {
  display: flex;
  justify-content: space-around;
  height: 86rpx;
  padding: 0 84rpx;
  border-bottom: 2rpx solid #e6e6e6;
  background-color: #fff;
}
.tab-info.fixed > .title{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}


.content.marT88{
  margin-top: 88rpx;
}
或者
.content.marT88{
  padding-top: 88rpx;
}

结果：当title内容部分高度 + content内容部分高度 接近屏幕本身高度时， 在安卓手机上没有问题，可以完美实现。但是，在iphone手机上会出现闪烁问题。

原因：iphone手机浏览器滚动到底部/顶部时，有一个默认的动画效果。再加上，固定顶部会引起页面的回流。

解决：页面一进入，就把title部分直接脱离文档流，这样就不会因为固定顶部而使得页面的回流问题。这个，在页面性能优化上很重要。如果后期因为用户行为要对某个元素进行动画或脱离文档流的操作，那么，在页面第一次渲染时就尽量让其脱离文档流。这样，后期的用户行为就不会引起页面的回流现象，从而影响页面的显示，而导致性能上和体验上的问题。

//js
onPageScroll: function (e) {
    if(e.scrollTop >= this.data.tabScrollTop + 10){
      this.setData({
        tabFixed: true
      })
    } else {
      this.setData({
        tabFixed: false
      })
    }
  }

//wxml
<view class="tab-info {{tabFixed ? 'fixed':''}}">
  <view class="title">
    <text>动 态</text>
    <text>订 单</text>
  </view>
  <view class="hidden-box"></view>
</view>

//wxss
.tab-info > .title {
  display: flex;
  justify-content: space-around;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
  height: 86rpx;
  padding: 0 84rpx;
  border-bottom: 2rpx solid #e6e6e6;
  background-color: #fff;
}
.tab-info.fixed > .title{
  position: fixed;
}
.tab-info .hidden-box{
  height: 88rpx;
}