当固定高度的scroll-view遇到sticky定位/sticky的特性

目的

给table表格设置表头固定，使用position:sticky;便可轻松实现

问题

给srcoll-view设置了高度，一旦表头滚动超过了该高度，sticky定位就会失效

      就像以上这种情况

解决

在scroll-view下嵌套一个view标签

代码

<scroll-view scroll-x scroll-y show-scrollbar="false" style="margin-bottom: 15%;height:300px;">
      <view>
            <t-table border="1" border-color="#8A6DE9" style="position: sticky;top: 0;z-index: 1;">
                  <t-tr font-size="13" color="#8A6DE9" align="right">
                        <t-th align="center" style="display: sticky;left: 0;">产品规格</t-th>
                        <t-th align="center">产品数量</t-th>
                        <t-th align="center">产品单位</t-th>
                        <t-th align="center">产品品牌</t-th>
                        <t-th align="center">产品报价</t-th>
                        <t-th align="center">清除</t-th> 
                  </t-tr>
            </t-table>
            <t-table border="1" border-color="#8A6DE9" >
                  <t-tr font-size="12" color="#8A6DE9" align="right" v-for="(item, index) in form" :key="index" >
                        <t-td align="center" style="display: sticky;left: 0;">{{ item.productSpecs }}</t-td>
                        <t-td align="center">{{ item.productCount }}</t-td>
                        <t-td align="center">{{ item.productUnit }}</t-td>
                        <t-td align="center">{{ item.productBrand }}</t-td>
                        <t-td align="center">{{ item.productPrice }}</t-td>
                        <t-td align="center"><navigator :url="'kehu_qingdan?id=' + item.id + '&contractnum=' + item.contractnum" class="top"> 
                              <button class="chaKan_buttton" type="primary">查看</button></navigator></t-td>
                  </t-tr>
            </t-table>
      </view>
</scroll-view>

归纳

sticky的特性：

• 1.sticky不会触发BFC，
• 2.当父元素的height：100%或者固定值时，页面滑动到一定高度之后sticky属性会失效。
• 3.父元素不能有overflow:hidden或者overflow:auto属性。
• 4.父元素高度不能低于sticky高度，必须指定top、bottom、left、right4个值之一。

参考

https://developers.weixin.qq.com/community/develop/article/doc/000202ebeb046859fc99548c756813