vue-手机端实现下拉实现多个表头冻结

最新推荐文章于 2024-03-01 20:47:15 发布

「已注销」

最新推荐文章于 2024-03-01 20:47:15 发布

阅读量277

点赞数

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_67198216/article/details/126548429

版权

本文详细介绍了如何在Vue.js移动端项目中实现下拉时多个表头固定的效果，确保用户在滚动查看长表格内容时，关键的表头信息始终保持可见。通过巧妙的CSS定位和Vue指令，可以有效地解决这个问题，提高用户体验。

摘要由CSDN通过智能技术生成

.active {
      position: fixed;
      top: 0;
      z-index: 100000000;
      width: 100%;
    }
   <!-- 表格 -->
          <div class="bj-table" v-for="(item, key) in list" :key="key">
            //表头
            <div class="flex bj-table-header" style="display: flex">
             </div>
            //表格数据
              <div class="bj-table-body-item" v-for="i in maxLength" :key="i">
                </div>
              </div>
            </div>
          </div>

 <img  @load="loadImage" :src="" crossOrigin="anonymous" />
 @load //图片加载完成后执行方法
 //固定表头
      loadImage(){
        let arry=[];
        let num=0;
        let tab=document.getElementsByClassName("bj-table-header");
        //获取表头距离顶部高度
        for (let i = 0; i <