How to implement horizontal scrolling list in Vue?

Vue.js is a very popular front-end framework that allows for rapid development and is very scalable. When we need to implement a horizontal scrolling list, Vue.js also provides some very convenient components and instructions, which allow us to achieve a beautiful horizontal scrolling effect without requiring too much code.

This article will introduce a simple method to implement a horizontal scrolling list using Vue.js and some third-party libraries.

Preparation

First, we need to introduce some third-party libraries: Vue, Vue-Swiper and Swiper. Among them, Vue-Swiper is a carousel component suitable for Vue.js, and Swiper is a very powerful carousel plug-in library.

In our Vue.js project, these libraries can be installed in the following ways:

# 通过 npm 安装
npm install vue vue-swiper swiper --save

Implementation method

Next, we need to follow the following steps to implement our Horizontal scrolling list:

1. Introduction of components and libraries

We need to introduce the three libraries we just installed into the JavaScript file of Vue.js:

import Vue from 'vue';
import VueSwiper from 'vue-swiper';
import 'swiper/css/swiper.css';
import Swiper from 'swiper';

At the same time , we also need to introduce CSS styles into the HTML file of Vue.js:

<link rel="stylesheet" href="/node_modules/swiper/css/swiper.css">

2. Create a container

We need to create a container to contain the entire scrolling list. In the HTML file of Vue.js, we can create a container like the following:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="(item, index) in items" :key="index">{{ item }}</div>
  </div>
</div>

In the above HTML example, we define a scrolling list container .swiper-container, A .swiper-wrapper that contains all scroll list items, and .swiper-slide for each scroll list item. We use the v-for directive to loop through each list item, and the array items contains all the list item data.

3. Initialize Swiper

Next, we need to initialize Swiper in the mounted hook function in the JavaScript file of Vue.js:

export default {
  data() {
    return {
      items: ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7']
    }
  },
  mounted() {
    new Swiper('.swiper-container', {
      slidesPerView: 'auto',
      spaceBetween: 30,
      scrollbar: {
        el: '.swiper-scrollbar',
        hide: false,
      },
    });
  }
}

In the above JavaScript example , we create a Swiper instance and pass the Swiper container selector .swiper-container as a parameter to the constructor of Swiper.

We also specify the view amount of each list item slidesPerView to auto, which automatically calculates the width of each list item. At the same time, we defined the interval between list items as 30, and enabled the scroll bar function.

4. Style settings

Finally, we need to add some styles to our scrolling list. In our Vue.js CSS file, we can define the style like this:

.swiper-container {
  width: 100%;
  height: 100px;
  overflow: hidden;
  position: relative;
}

.swiper-wrapper {
  position: relative;
  width: fit-content;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.swiper-slide {
  padding: 20px;
  background-color: #f5f5f5;
}

In the above CSS code, we define the width of the container .swiper-container as 100%, height is 100px. We use the overflow: hidden attribute to hide the overflow part. We also define the styles of .swiper-wrapper and .swiper-slide through the position: relative attribute, as well as the background color of the scrolling list items.

Conclusion

Through the above steps, we can use Vue.js and Swiper components to implement a complete horizontal scrolling list. As we can see, the process is relatively simple and with just some minor configuration and styling we can easily implement a horizontally scrolling list.

The above is the detailed content of How to implement horizontal scrolling list in Vue?. For more information, please follow other related articles on the PHP Chinese website!