vue列表项吸顶 js+css两种骚操作

Bertha 。 2023-01-05 01:21 136阅读 0赞

demo需求：vue项目中，在列表里，滑动到哪个日期的时候，哪个日期就吸顶显示：  
![在这里插入图片描述][20210111115247111.gif]

## js方法： ##

用js的方法思路：获取每一项item的底部距离顶部的高度，把所有的高度放在一个数组里面，在去循环比对，在使用scroll事件，看我们滑动的距离在数组的哪个区间里，在哪个区间就展示展示那个日期，上代码：

<template>
      <div class="box">
        <div class="titleTimeStyle">日期 { {  titleTime }}</div>
        <div class="list" @scroll="scrollTop">
          <div class="item" v-for="(item, i) in listData" :key="i">
            <div class="data">
              { {  item.time }}
            </div>
            <div
              class="country"
              v-for="(items, index) in item.country"
              :key="index"
            >
              { {  items.name }}
            </div>
            <div :class="'items' + i"></div>
          </div>
        </div>
      </div>
    </template>
       <script>
    export default { 
      data() { 
        return { 
          titleTime: "",
          listData: [
            {  time: "1.01", country: [{  name: "德国" }, {  name: "英国" }] },
            { 
              time: "1.02",
              country: [{  name: "日本" }, {  name: "美国" }, {  name: "印度" }],
            },
            { 
              time: "1.03",
              country: [
                {  name: "冰岛" },
                {  name: "丹麦" },
                {  name: "挪威" },
                {  name: "芬兰" },
                {  name: "爱尔兰" },
              ],
            },
            { 
              time: "1.04",
              country: [{  name: "瑞典" }, {  name: "波兰" }],
            },
            { 
              time: "1.05",
              country: [{  name: "捷克" }, {  name: "奥地利" }, {  name: "俄罗斯" }],
            },
            { 
              time: "1.06",
              country: [{  name: "爱沙尼亚" }, {  name: "白俄罗斯" }],
            },
            { 
              time: "1.07",
              country: [
                {  name: "葡萄牙" },
                {  name: "埃及" },
                {  name: "利比亚" },
                {  name: "摩洛哥" },
              ],
            },
            { 
              time: "1.08",
              country: [{  name: "刚果" }, {  name: "安哥拉" }, {  name: "乌干达" }],
            },
            { 
              time: "1.09",
              country: [
                {  name: "马达加斯加" },
                {  name: "新西兰" },
                {  name: "库克群岛" },
              ],
            },
            { 
              time: "1.10",
              country: [
                {  name: "加拿大" },
                {  name: "哥伦比亚" },
                {  name: "巴西" },
                {  name: "巴拉圭" },
                {  name: "阿根廷" },
              ],
            },
          ],
          timeList: [],
        };
      },
      methods: { 
        init() { 
          let that = this;
          this.listData.map((res, i) => { 
            let topH = document.querySelector(`.items${ i}`).getBoundingClientRect()
              .top; // 获取每一项，底部距离文档顶部的距离
            that.timeList.push(topH);
          });
          this.titleTime = this.listData[0].time; // 默认展示第一项日期
        },
    
        scrollTop() { 
          let scrollTop = document.documentElement.scrollTop + 80 / 2; // 卷去的距离
          this.timeList.map((res, i) => { 
            if (scrollTop < this.timeList[0]) { 
              console.log(scrollTop);
              this.titleTime = this.listData[0].time; // 第一项 日期展示
              return;
            }
            if (scrollTop >= this.timeList[i] && scrollTop < this.timeList[i + 1]) { 
              console.log("区间", this.timeList[i]);
              this.titleTime = this.listData[i + 1].time; // 第二项之后
            }
          });
        },
      },
      mounted() { 
        window.addEventListener("scroll", this.scrollTop); // 监听 scroll
        this.init();
      },
    };
    </script>
    <style lang="less">
    .box { 
      width: 100%;
      min-height: 100vh;
      position: relative;
    }
    .titleTimeStyle { 
      position: fixed;
      background-color: #fff;
      width: 100%;
      height: 80px;
      line-height: 80px;
      font-size: 50px;
    }
    .list { 
      min-height: 100vh;
      width: 100%;
      overflow-y: auto;
      padding-top: 80px;
      .item { 
        width: 100%;
        border: 1px solid red;
        .data { 
          height: 80px;
          line-height: 80px;
          font-size: 50px;
          background-color: #eee;
        }
        .country { 
          height: 100px;
          text-align: center;
        }
      }
    }
    </style>

## css方法： ##

js写法代码有些冗余有啥好的办法咧，我们可以用css的骚操作。  
css核心两段代码：

position: sticky;
        top: 0;

css方法效果：  
![在这里插入图片描述][20210111130300729.gif]

css方法完整代码：

<template>
      <div class="box">
        <div class="list">
          <div class="item" v-for="(item, i) in listData" :key="i">
            <div class="data">
              { {  item.time }}
            </div>
            <div
              class="country"
              v-for="(items, index) in item.country"
              :key="index"
            >
              { {  items.name }}
            </div>
            <div :class="'items' + i"></div>
          </div>
        </div>
      </div>
    </template>
       <script>
    export default { 
      data() { 
        return { 
          titleTime: "",
          listData: [
            {  time: "1.01", country: [{  name: "德国" }, {  name: "英国" }] },
            { 
              time: "1.02",
              country: [{  name: "日本" }, {  name: "美国" }, {  name: "印度" }],
            },
            { 
              time: "1.03",
              country: [
                {  name: "冰岛" },
                {  name: "丹麦" },
                {  name: "挪威" },
                {  name: "芬兰" },
                {  name: "爱尔兰" },
              ],
            },
            { 
              time: "1.04",
              country: [{  name: "瑞典" }, {  name: "波兰" }],
            },
            { 
              time: "1.05",
              country: [{  name: "捷克" }, {  name: "奥地利" }, {  name: "俄罗斯" }],
            },
            { 
              time: "1.06",
              country: [{  name: "爱沙尼亚" }, {  name: "白俄罗斯" }],
            },
            { 
              time: "1.07",
              country: [
                {  name: "葡萄牙" },
                {  name: "埃及" },
                {  name: "利比亚" },
                {  name: "摩洛哥" },
              ],
            },
            { 
              time: "1.08",
              country: [{  name: "刚果" }, {  name: "安哥拉" }, {  name: "乌干达" }],
            },
            { 
              time: "1.09",
              country: [
                {  name: "马达加斯加" },
                {  name: "新西兰" },
                {  name: "库克群岛" },
              ],
            },
            { 
              time: "1.10",
              country: [
                {  name: "加拿大" },
                {  name: "哥伦比亚" },
                {  name: "巴西" },
                {  name: "巴拉圭" },
                {  name: "阿根廷" },
              ],
            },
          ],
        };
      },
    };
    </script>
    <style lang="less">
    .box { 
      width: 100%;
      min-height: 100vh;
      position: relative;
    }
    .titleTimeStyle { 
      position: fixed;
      background-color: #fff;
      width: 100%;
      height: 80px;
      line-height: 80px;
      font-size: 50px;
    }
    .list { 
      min-height: 100vh;
      width: 100%;
      .item { 
        top: 0;
        width: 100%;
        border: 1px solid red;
    
        .data { 
          height: 80px;
          line-height: 80px;
          font-size: 50px;
          background-color: #eee;
          position: sticky; 
          top: 0;
        }
        .country { 
          height: 100px;
          text-align: center;
        }
      }
    }
    </style>

[20210111115247111.gif]: /images/20221119/4af4a454e32f4cf3ad35c9b2aba7a7c9.png
[20210111130300729.gif]: https://img-blog.csdnimg.cn/20210111130300729.gif