How to write vue rolling news

Vue is a popular front-end framework, and its core idea is component development. Its component-based development style makes it ideal for building interactive interfaces and complex single-page applications. In Vue, we can easily implement the scrolling news component. In this article, we will introduce how to implement a scrolling news component using Vue.

HTML structure

First, we need to define the HTML structure of the scrolling news component. The following is a basic HTML structure:

<div class="news-container">
  <ul class="news-list">
    <li class="news-item">新闻内容1</li>
    <li class="news-item">新闻内容2</li>
    <li class="news-item">新闻内容3</li>
    <li class="news-item">新闻内容4</li>
    <li class="news-item">新闻内容5</li>
    <li class="news-item">新闻内容6</li>
  </ul>
</div>

Among them, news-container is the container of the scrolling news component, news-list is the container of the news list, and news-item is the container of each news item. We can set more styles and HTML structures according to our needs.

Vue component

Next, we need to define the scrolling news component in Vue. The following is a basic Vue component:

<template>
  <div class="news-container">
    <ul class="news-list">
      <li v-for="news in newsList" class="news-item">{{ news }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "ScrollNews",
  props: {
    delay: {
      type: Number,
      default: 3000,
    },
    newsList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      currentIndex: 0,
    };
  },
  created() {
    this.startTimer();
  },
  methods: {
    startTimer() {
      setInterval(() => {
        this.currentIndex++;
        if (this.currentIndex > this.newsList.length - 1) {
          this.currentIndex = 0;
        }
      }, this.delay);
    },
  },
};
</script>

The above code defines a Vue component named ScrollNews, which accepts two props attributes: delay and newsList. The delay attribute indicates how many milliseconds to scroll, and the newsList attribute indicates the news list. In the component, we use the v-for directive to loop through the rendering of the news list. The currentIndex property represents the index of the news item currently being displayed.

In the created hook function, we call the startTimer method to start the timer, which is used to scroll news regularly. In the startTimer method, we use the setInterval method to regularly update the currentIndex property. If the value of currentIndex exceeds the length of newsList minus 1, reset currentIndex to 0. This allows infinite scrolling.

Style

Finally, we need to add styles to the scrolling news component. The following is a basic CSS style:

.news-container {
  width: 100%;
  overflow: hidden;
}

.news-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.news-item {
  line-height: 30px;
  margin-bottom: 10px;
}

We set the overflow of news-container to hidden to hide content beyond its container. The styles of news-list and news-item are only for beautification.

Using components

After defining the scrolling news component, we can use it in the Vue application. The following is an example of using the ScrollNews component:

<template>
  <div>
    <scroll-news :news-list="newsList" :delay="3000"></scroll-news>
  </div>
</template>

<script>
import ScrollNews from "./ScrollNews.vue";

export default {
  name: "App",
  components: {
    ScrollNews,
  },
  data() {
    return {
      newsList: [
        "新闻内容1",
        "新闻内容2",
        "新闻内容3",
        "新闻内容4",
        "新闻内容5",
        "新闻内容6",
      ],
    };
  },
};
</script>

In the above code, we use the ScrollNews component in the Vue application and pass the props attribute to it. The newsList attribute is an array containing a news list, and the delay attribute indicates scrolling every 3000 milliseconds.

Summary

In this article, we introduced how to use Vue to implement a rolling news component. We first defined the HTML structure and style, then defined the ScrollNews component in Vue, and implemented the infinite scrolling function. Finally, we showed how to use the ScrollNews component in a Vue application.

The above is the detailed content of How to write vue rolling news. For more information, please follow other related articles on the PHP Chinese website!