當固定高度的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