vue實現(xiàn)列表垂直無縫滾動

更新時間：2022年04月08日 09:51:11 作者：楊陽洋

這篇文章主要為大家詳細介紹了vue實現(xiàn)列表垂直無縫滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)列表垂直無縫滾動的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)新聞列表的輪播（如下圖）

上代碼

封裝的so-marquee.vue

<template>
? ? <div
? ? ? ? class="marquee-wrapper"
? ? ? ? :style="{ width: realWidth + 'px' }"
? ? >
? ? ? ? <div
? ? ? ? ? ? class="marquee-container"
? ? ? ? ? ? :style="{ height: realHeight + 'px' }"
? ? ? ? ? ? :class="className"
? ? ? ? >
? ? ? ? ? ? <ul
? ? ? ? ? ? ? ? ref="marqueeCon"
? ? ? ? ? ? ? ? :id="tooltipId"
? ? ? ? ? ? ? ? class="marquee-content"
? ? ? ? ? ? ? ? :class="{ anim: animate === true}"
? ? ? ? ? ? ? ? @mouseenter="handleStop()"
? ? ? ? ? ? ? ? @mouseleave="handleUp()"
? ? ? ? ? ? >
? ? ? ? ? ? ? ? <li
? ? ? ? ? ? ? ? ? ? v-for="(item,index) in realData"
? ? ? ? ? ? ? ? ? ? :key="`${tooltipId}-${item.id}-${index}`"
? ? ? ? ? ? ? ? ? ? class="marquee-item"
? ? ? ? ? ? ? ? ? ? :style="{ height: itemHeigth + 'px' }"
? ? ? ? ? ? ? ? ? ? @click="handleClick(item)"
? ? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? ? ? <slot name="itemCon" :item="item"></slot>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? </div>
</template>
<script>
import { parseToNum, generateId } from '@/utils/util'

export default {
? ? name: "so-marquee",
? ? props: {
? ? ? ? /*
? ? ? ? * 可接受傳參
? ? ? ? * data ? ? ? ? ?列表數(shù)據(jù)
? ? ? ? * className ? ? 自定義類名
? ? ? ? * width ? ? ? ? 列表寬度，默認值：400
? ? ? ? * height ? ? ? ?列表高度,默認值：200
? ? ? ? * showNumber ? ?可視的條目數(shù)，默認值：5
? ? ? ? * speed ? ? ? ? 輪播速度，默認值：1000
? ? ? ? * */
? ? ? ? //列表數(shù)據(jù)
? ? ? ? data: {
? ? ? ? ? ? type: Array,
? ? ? ? ? ? default: () => [],
? ? ? ? },
? ? ? ? //自定義類名
? ? ? ? className: String,
? ? ? ? //列表寬度，默認值：400
? ? ? ? width: {
? ? ? ? ? ? type: [Number, String],
? ? ? ? ? ? default: 400
? ? ? ? },
? ? ? ? //列表高度,默認值：200
? ? ? ? height: {
? ? ? ? ? ? type: [Number, String],
? ? ? ? ? ? default: 200
? ? ? ? },
? ? ? ? //可視的條目數(shù)，默認值：5
? ? ? ? showNumber: {
? ? ? ? ? ? type: [Number, String],
? ? ? ? ? ? default: 5
? ? ? ? },
? ? ? ? //輪播速度，默認值：1000
? ? ? ? speed: {
? ? ? ? ? ? type: [Number, String],
? ? ? ? ? ? default: 1000
? ? ? ? }
? ? },
? ? data() {
? ? ? ? return {
? ? ? ? ? ? intnum: undefined,
? ? ? ? ? ? animate: false
? ? ? ? };
? ? },
? ? computed: {
? ? ? ? tooltipId() {
? ? ? ? ? ? return `marquee-con-${ generateId() }`;
? ? ? ? },
? ? ? ? realWidth() {
? ? ? ? ? ? return parseToNum(this.width)
? ? ? ? },
? ? ? ? realHeight() {
? ? ? ? ? ? return parseToNum(this.height)
? ? ? ? },
? ? ? ? realShowNumber() {
? ? ? ? ? ? return parseToNum(this.showNumber)
? ? ? ? },
? ? ? ? realSpeed() {
? ? ? ? ? ? return parseToNum(this.speed) < 1000 ? 1000 : parseToNum(this.speed)
? ? ? ? },
? ? ? ? itemHeigth() {
? ? ? ? ? ? return this.realHeight / this.realShowNumber
? ? ? ? },
? ? ? ? realData() {
? ? ? ? ? ? return JSON.parse(JSON.stringify(this.data))
? ? ? ? }
? ? },
? ? mounted() {
? ? ? ? if (this.realData.length > this.realShowNumber) {
? ? ? ? ? ? this.scrollUp();
? ? ? ? }
? ? },
? ? methods: {
? ? ? ? scrollUp() {
? ? ? ? ? ? // eslint-disable-next-line no-unused-vars
? ? ? ? ? ? this.intnum = setInterval(_ => {
? ? ? ? ? ? ? ? this.animate = true;
? ? ? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? ? ? this.realData.push(this.realData[0]); ? // 將數(shù)組的第一個元素添加到數(shù)組的
? ? ? ? ? ? ? ? ? ? this.realData.shift(); ? ? ? ? ? ? ? //刪除數(shù)組的第一個元素
? ? ? ? ? ? ? ? ? ? this.animate = false; ? ? ? ? ? // margin-top 為0 的時候取消過渡動畫，實現(xiàn)無縫滾動
? ? ? ? ? ? ? ? }, this.realSpeed / 2)
? ? ? ? ? ? ? ? this.$once('hook:beforeDestroy', () => {
? ? ? ? ? ? ? ? ? ? this.cleanup()
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }, this.realSpeed);
? ? ? ? },
? ? ? ? handleStop() {
? ? ? ? ? ? this.cleanup()
? ? ? ? },
? ? ? ? handleUp() {
? ? ? ? ? ? this.scrollUp();
? ? ? ? },
? ? ? ? handleClick(row) {
? ? ? ? ? ? this.$emit('handleClick', row)
? ? ? ? },
? ? ? ? cleanup() {
? ? ? ? ? ? if (this.intnum) {
? ? ? ? ? ? ? ? clearInterval(this.intnum);
? ? ? ? ? ? ? ? this.intnum = null;
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? beforeDestroy() {
? ? ? ? this.cleanup();
? ? },
? ? deactivated() {
? ? ? ? this.cleanup();
? ? },
? ? watch: {
? ? ? ? animate(flag) {
? ? ? ? ? ? this.marqueeCon = this.$refs.marqueeCon
? ? ? ? ? ? if (flag) {
? ? ? ? ? ? ? ? this.marqueeCon.style.marginTop = `-${ this.itemHeigth }px`
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? this.marqueeCon.style.marginTop = 0
? ? ? ? ? ? }
? ? ? ? },
? ? }
};
</script>
<style scoped lang="scss">
? ? .marquee-container {
? ? ? ? overflow: hidden;
? ? }

? ? .marquee-content {
? ? ? ? position: relative;
? ? }

? ? .anim {
? ? ? ? transition: all 0.5s;
? ? }

? ? .marquee-item {
? ? ? ? display: flex;
? ? ? ? align-items: center;
? ? ? ? justify-content: space-around;
? ? }
</style>

parseToNum方法

export function parseToNum(value) {
? ? if (value !== undefined) {
? ? ? ? value = parseInt(value, 10)
? ? ? ? if (isNaN(value)) {
? ? ? ? ? ? value = null;
? ? ? ? }
? ? }
? ? return value
}

generateId 方法

export const generateId = function() {
? ? return Math.floor(Math.random() * 10000);
};

父組件調(diào)用

<template>
? ? <div id="app">
? ? ? ? <so-marquee
? ? ? ? ? ? :data="jsonData"
? ? ? ? ? ? :height="200"
? ? ? ? ? ? :showNumber="4"
? ? ? ? ? ? :speed="500"
? ? ? ? ? ? class="my-ui-marquee"
? ? ? ? ? ? @handleClick="handleMarqueeClick"
? ? ? ? >
? ? ? ? ? ? <template v-slot:itemCon="{item}">
? ? ? ? ? ? ? ? <div>{{ item.id }}</div>
? ? ? ? ? ? ? ? <div>{{ item.name }}</div>
? ? ? ? ? ? ? ? <div>{{ item.date }}</div>
? ? ? ? ? ? </template>
? ? ? ? </so-marquee>
? ? </div>
</template>

<script>
import soMarquee from './components/so-marquee'

export default {
? ? name: 'App',
? ? data() {
? ? ? ? return {
? ? ? ? ? ? jsonData: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? id: 1,
? ? ? ? ? ? ? ? ? ? name: "開會通知",
? ? ? ? ? ? ? ? ? ? date: "2020-02-01"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? id: 2,
? ? ? ? ? ? ? ? ? ? name: "放假通知",
? ? ? ? ? ? ? ? ? ? date: "2020-02-02"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? id: 3,
? ? ? ? ? ? ? ? ? ? name: "停水通知",
? ? ? ? ? ? ? ? ? ? date: "2020-02-03"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? id: 4,
? ? ? ? ? ? ? ? ? ? name: "停電通知",
? ? ? ? ? ? ? ? ? ? date: "2020-02-04"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? id: 5,
? ? ? ? ? ? ? ? ? ? name: "停車通知",
? ? ? ? ? ? ? ? ? ? date: "2020-02-05"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? id: 6,
? ? ? ? ? ? ? ? ? ? name: "獎勵通知",
? ? ? ? ? ? ? ? ? ? date: "2020-02-06"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? id: 7,
? ? ? ? ? ? ? ? ? ? name: "處分通知",
? ? ? ? ? ? ? ? ? ? date: "2020-02-07"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? id: 8,
? ? ? ? ? ? ? ? ? ? name: "處分8通知",
? ? ? ? ? ? ? ? ? ? date: "2020-02-08"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? id: 9,
? ? ? ? ? ? ? ? ? ? name: "處分9通知",
? ? ? ? ? ? ? ? ? ? date: "2020-02-09"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? id: 10,
? ? ? ? ? ? ? ? ? ? name: "處分10通知",
? ? ? ? ? ? ? ? ? ? date: "2020-02-10"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ]
? ? ? ? }
? ? },
? ? components: {
? ? ? ? soMarquee
? ? },
? ? methods: {
? ? ? ? handleMarqueeClick(row) {
? ? ? ? ? ? alert(`當前點擊的第${row.id}行`)
? ? ? ? }
? ? }
}
</script>

<style scoped lang="scss">
.my-ui-marquee {
? ? ::v-deep.marquee-item {
? ? ? ? cursor: pointer;
? ? }
}
</style>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: