How to remove the scroll bar when scrolling horizontally in uniapp

When using uniapp to develop mobile applications, we often encounter the need to implement horizontal scrolling. For example, a horizontal menu, an image carousel, a paged browsing, etc. By default, the system's own horizontal scroll bar will appear when scrolling horizontally. However, in some cases where the design layout is exquisite and the style is unified, this default scroll bar may destroy the entire design effect. Therefore, how to remove the horizontal scroll bar has become a problem that needs to be solved.

This article will introduce how to remove the horizontal scroll bar in uniapp. For convenience, the following example will use a horizontal menu as an example.

1. Principle Analysis

How to remove the horizontal scroll bar in HTML and CSS? We can achieve this by setting the overflow-x attribute of the element to hidden. For example, the following code can prevent an element from having a horizontal scroll bar:

<div style="width: 300px; height: 200px; overflow-x: hidden;">
  这是一个不会出现横向滚动条的div。
</div>

In uniapp, we can remove the horizontal scroll bar through a similar method. Taking a horizontal menu as an example, we can define a code similar to the following in the template:

<template>
  <div class="menu-container">
    <div class="menu-item">菜单1</div>
    <div class="menu-item">菜单2</div>
    <div class="menu-item">菜单3</div>
    <div class="menu-item">菜单4</div>
    <div class="menu-item">菜单5</div>
    <div class="menu-item">菜单6</div>
  </div>
</template>

Then, in the style, we can define the following style:

.menu-container {
  overflow-x: hidden; /* 隐藏横向滚动条 */
  white-space: nowrap; /* 让菜单项水平排列 */
}

.menu-item {
  display: inline-block; /* 使菜单项显示在同一行 */
  margin-right: 20px; /* 间隔 */
}

This can be achieved A horizontal menu without horizontal scroll bars.

2. Demo demonstration

In order to better demonstrate the effect of the horizontal scroll bar, we can add some styles and animations to make the whole process more lively and interesting. Below is a simple demo that shows how to implement a horizontal menu without horizontal scroll bars.

<template>
  <div class="menu-container">
    <div class="menu-item" @click="toggleMenu(1)">菜单1</div>
    <div class="menu-item" @click="toggleMenu(2)">菜单2</div>
    <div class="menu-item" @click="toggleMenu(3)">菜单3</div>
    <div class="menu-item" @click="toggleMenu(4)">菜单4</div>
    <div class="menu-item" @click="toggleMenu(5)">菜单5</div>
    <div class="menu-item" @click="toggleMenu(6)">菜单6</div>
  </div>
  <div class="page-container">
    <div :class="{ &#39;page&#39;: true, &#39;show&#39;: showPage1 }">
      <h2>这是菜单1对应的页面</h2>
      <p>点击其他菜单可以查看不同的页面</p>
    </div>
    <div :class="{ &#39;page&#39;: true, &#39;show&#39;: showPage2 }">
      <h2>这是菜单2对应的页面</h2>
      <p>uniapp是一种跨平台的开发框架</p>
    </div>
    <div :class="{ &#39;page&#39;: true, &#39;show&#39;: showPage3 }">
      <h2>这是菜单3对应的页面</h2>
      <p>基于Vue.js开发</p>
    </div>
    <div :class="{ &#39;page&#39;: true, &#39;show&#39;: showPage4 }">
      <h2>这是菜单4对应的页面</h2>
      <p>支持多端发布</p>
    </div>
    <div :class="{ &#39;page&#39;: true, &#39;show&#39;: showPage5 }">
      <h2>这是菜单5对应的页面</h2>
      <p>可以快速开发APP、小程序、H5等应用</p>
    </div>
    <div :class="{ &#39;page&#39;: true, &#39;show&#39;: showPage6 }">
      <h2>这是菜单6对应的页面</h2>
      <p>感谢您使用uniapp框架</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPage1: true,
      showPage2: false,
      showPage3: false,
      showPage4: false,
      showPage5: false,
      showPage6: false
    }
  },
  methods: {
    toggleMenu(n) {
      this.showPage1 = false;
      this.showPage2 = false;
      this.showPage3 = false;
      this.showPage4 = false;
      this.showPage5 = false;
      this.showPage6 = false;
      this["showPage" + n] = true;
    }
  }
}
</script>

<style>
.menu-container {
  overflow-x: hidden;
  white-space: nowrap;
  font-size: 0; /* 防止inline-block元素产生空白间隙的老生常谈，设置font-size为0即可 */
}

.menu-item {
  display: inline-block;
  height: 80px;
  font-size: 16px;
  line-height: 80px;
  margin-right: 20px;
  padding: 0 20px;
  background-color: #eee;
  border-radius: 10px;
  cursor: pointer;
}

.page-container {
  margin-top: 20px;
}

.page {
  display: none;
  height: 300px;
  padding-top: 100px;
  text-align: center;
  font-size: 24px;
}

.page.show {
  display: block;
  animation: slide 0.5s ease-out;
}

@keyframes slide {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
</style>

This demo contains a horizontal menu and six pages. When we click on the menu, the current page will switch to the corresponding page, accompanied by switching animation. It can be seen that the spacing between menu items, the height of menu items, line colors, etc. are all defined according to the actual situation to achieve the best visual effect.

3. Conclusion

Through the introduction of this article, we know how to remove the horizontal scroll bar in uniapp, so that we can better customize the mobile application. In addition to horizontal menus, this technique can also be applied to other horizontal scrolling scenarios, such as image carousels, paged browsing, etc. If you are interested, you can carry out richer development on this basis.

In general, uniapp is a very powerful mobile application framework. It allows us to use Vue.js syntax, rapid development, cross-end deployment, and has a good developer community. By reading this article, I believe you can better master the development skills of uniapp and add a powerful tool to the development of mobile applications.

The above is the detailed content of How to remove the scroll bar when scrolling horizontally in uniapp. For more information, please follow other related articles on the PHP Chinese website!