How to implement page scrolling left and right in uniapp

With the continuous development of mobile Internet technology, modern front-end technology has become more and more colorful, and UI/UX designers have also begun to put forward higher requirements for the presentation of page effects. Among them, the left and right scrolling effect is widely used in a variety of scenarios. This article will introduce how to use uniapp to achieve the left and right scrolling effect of the page.

1. Overview of uniapp

Uniapp encapsulates the vue.js framework into a development center, which can be very convenient for multi-platform development, including but not limited to WeChat applets, Apps, H5, etc. . Compared with other multi-platform frameworks, uniapp is lightweight, easy to use, and supports plug-ins.

2. Implementation ideas

The common way to achieve the left and right scrolling effect of the page in uniapp is to introduce the better-scroll plug-in. better-scroll is a powerful and flexible isscroll component, which can help developers achieve various scrolling effects on the mobile side. Here we use the better-scroll plug-in to achieve the left and right scrolling effect of uniapp, which is divided into the following steps:

1. Download the better-scroll plug-in and introduce it into the uniapp project

Install the better-scroll plug-in in the project root directory:

npm install better-scroll --save

Introduce and instantiate it in the page you need to use:

import BScroll from 'better-scroll'

export default {
  data() {
    return {
      scroll: null
    }
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper)
  }
}

where this.$refs.wrapper is where the scrolling area is DOM element.

2. Realize the left and right scrolling areas

Realize the HTML structure of the left and right scrolling areas in the page, for example:

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </div>
</template>

The wrapper is the better-scroll plug-in The required scroll area container, content is the content in the scroll area. item is each scrollable child item.

3. Realize the left and right scrolling effect

Realize the left and right scrolling effect in the style, for example:

<style>
  .wrapper {
    width: 100%;
    height: 200px;
    overflow: hidden;
  }

  .content {
    width: 100%;
    height: 200px;
    display: flex;
  }

  .item {
    flex: 0 0 120px;
    height: 200px;
    margin-right: 10px;
    background-color: #eee;
  }
</style>

Among them, the wrapper should set the width and height, and Set overflow to hidden to hide content outside the area. The content needs to set the width and height, and the child items must have a certain width and height. The item is each scrollable sub-item, and you need to set the flex attribute to achieve equal spacing and equal width.

4. Add scrolling event monitoring

Add scrolling event monitoring in the mounted() function:

mounted() {
  this.scroll = new BScroll(this.$refs.wrapper)

  this.scroll.on('scroll', (pos) => {
    console.log(pos.x, pos.y)
  })
}

where pos.x and pos.y It is the offset of the scroll area. Various dynamic effects can be achieved by monitoring these two values.

3. Summary

Through the above four steps, we can achieve the left and right scrolling effect of the page in uniapp, which can be applied to a variety of scenarios, such as product display, picture exhibition, card layout, etc. . However, you should pay attention to the adaptation of the size of the scroll area and sub-items, as well as the parameter settings of the better-scroll plug-in, in order to achieve the best effect.

The above is the detailed content of How to implement page scrolling left and right in uniapp. For more information, please follow other related articles on the PHP Chinese website!