uniapp removes scroll bars

With the popularity of mobile applications, uniapp, as a cross-end application development framework based on Vue.js, is widely used on multiple platforms. What I want to discuss here is how to remove the default scroll bar of uniapp in the applet.

By default, components such as Swiper and ScrollView in mini programs will display scroll bars on iOS and Android, but in the industry sometimes it is necessary to hide these scroll bars. So, how do we get rid of these scroll bars? Next, I will provide you with specific solutions.

The scroll bar of the uniapp applet is provided by the WeChat client by default, and the WeChat client does not expose the corresponding API for operation. So to remove the scroll bar, we need to start with the development framework uniapp.

Method 1: By setting the style of the Page

Add the following code in App.vue:

<style>
  /* 去掉小程序swiper组件的滚动条 */
  .swiper-container, .swiper-wrapper, .swiper-slide {
    overflow: hidden !important;
  }
  /* 去掉小程序scroll-view组件的滚动条 */
  .scroll-view {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .scroll-view::-webkit-scrollbar {
    display: none !important;
  }
</style>

By setting the -scrollbar-width and scroll-view -ms-overflow-style is none, and then set the scroll bar invisible through ::-webkit-scrollbar to remove the scroll bar.

However, the disadvantage of this method is that when our page is more complex, it may cause page style confusion.

Method 2: Using plug-ins

There is a component library named "uni-ui" in the uniapp plug-in market, and in this component library there is a component called "uni-list" , which supports custom scroll bars and can be used to remove the default scroll bars.

The steps to use this component are as follows:

First, we need to introduce the uni-list component in components:

<template>
  <view>
    <uni-list :show-scrollbar="false">
      <uni-list-item>item1</uni-list-item>
      <uni-list-item>item2</uni-list-item>
      <uni-list-item>item3</uni-list-item>
    </uni-list>
  </view>
</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list/uni-list-item.vue'

export default {
  components: {
    uniList,
    uniListItem
  }
}
</script>

By setting the show-scrollbar attribute of uni-list to false to hide the default scroll bar.

So far, we have introduced two methods to remove the default scroll bar in the uniapp applet. It should be noted that although both methods can achieve the effect of removing scroll bars, due to the update mechanism of the WeChat client, these methods may not be effective on some versions. When a scroll bar problem occurs in our application, we need to test different versions to locate the problem and handle it accordingly.

To sum up, there are many ways to remove the default scroll bar in the uniapp applet. You can choose a suitable solution according to different situations and needs.

The above is the detailed content of uniapp removes scroll bars. For more information, please follow other related articles on the PHP Chinese website!