制作列表无缝滚动 vue-seamless-scroll

ゝ一纸荒年。 2023-01-06 11:51 256阅读 0赞

安装

npm install vue-seamless-scroll --save

在main.js文件里引用

import scroll from 'vue-seamless-scroll'
    Vue.use(scroll)

在组件中使用

组件内js

export default { 
      data() { 
        return { 
          step: 0,
          //
          listData: [
            { 
              name: "张小生1",
              prize: "联想ThinkPad 翼480联想ThinkPad 翼480联想ThinkPad 翼480",
            },
            { 
              name: "张小生2",
              prize: "联想ThinkPad 翼480",
            },
            { 
              name: "张小生3",
              prize: "联想ThinkPad 翼480",
            },
            { 
              name: "张小生4",
              prize: "联想ThinkPad 翼480",
            },
            { 
              name: "张小生5",
              prize: "联想ThinkPad 翼480",
            },
            { 
              name: "张小生6",
              prize: "联想ThinkPad 翼480",
            },
            { 
              name: "张小生10",
              prize: "联想ThinkPad 翼480联想ThinkPad 翼480联想ThinkPad 翼480",
            },
            { 
              name: "张小生20",
              prize: "联想ThinkPad 翼480",
            },
            { 
              name: "张小生30",
              prize: "联想ThinkPad 翼480",
            },
            { 
              name: "张小生40",
              prize: "联想ThinkPad 翼480",
            },
            { 
              name: "张小生11",
              prize: "联想ThinkPad 翼480",
            },
            { 
              name: "张小生12",
              prize: "联想ThinkPad 翼480",
            },
            { 
              name: "张小生111",
              prize: "联想ThinkPad 翼480",
            },
            { 
              name: "张小生121",
              prize: "联想ThinkPad 翼480",
            },
          ],
        };
      },
      computed: { 
        optionHover() { 
          return { 
            step: this.step, // 数值越大速度滚动越快
            limitMoveNum: 12, // 开始无缝滚动的数据量 this.dataList.length
            hoverStop: false, // 是否开启鼠标悬停stop
            direction: 1, // 0向下 1向上 2向左 3向右
            openWatch: true, // 开启数据实时监控刷新dom
            singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
            singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
            waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
            isSingleRemUnit: true, //是否开启rem度量
          };
        },
      },
      mounted() { },
      methods: { 
        returnHome() { 
          this.$router.replace({  path: "/" });
        },
        stopScroll() { 
          if (this.step == 0) { 
            this.step = 0.28;
          } else { 
            this.step = 0;
          }
        },
      },
    };

组件内样式less

ul, li { 
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    .result { 
      position: relative;
      width: 100vw;
      height: 100vh;
      background: url("../../static/images/p3/bg_3.png") no-repeat;
      background-size: 100% 100%;
      overflow: hidden; .return-home { 
        position: absolute;
        top: 30rem;
        right: 20rem;
        width: 89rem;
        height: 29rem;
        background: url("../../static/images/p2/btn_3.png") no-repeat;
        background-size: 100% 100%;
      }
    
      .scroll-container { 
        width: 700rem;
        height: 582rem;
        margin: 50rem auto 0;
        font-size: 24rem;
        color: #fff; .result-head { 
          width: 100%;
          height: 28rem;
          margin-bottom: 20rem;
          display: flex;
          justify-content: flex-start;
          font-size: 24rem;
          color: #fff; .result-name { 
            width: 180rem;
            white-space: nowrap;
          }
          .result-prize { 
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .seamless-warp { 
          height: 480rem;
          overflow: hidden;
        }
        .list-item { 
          width: 100%;
          height: 40rem;
          display: flex;
          justify-content: flex-start; .name { 
            width: 180rem;
            white-space: nowrap;
          }
          .prize { 
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }