uniapp隐藏scroll-view滚动条

uniapp基础

本文章记录uniapp如何去除scroll-view滚动条问题

---

---

前言

这段时间会学习并使用uniapp做项目，会总结一些关于uniapp的坑以及解决方法，希望能帮助到你。

---

一、效果如下

<script lang="ts" setup>
const tabIndex = ref(0)
const scrollInto = ref('tab0')
const tabList = [
  {
    id: 'tab01',
    name: 'tab01',
    newsid: 0,
  },
  {
    id: 'tab02',
    name: 'tab02',
    newsid: 23,
  },
  {
    id: 'tab03',
    name: 'tab03',
    newsid: 223,
  },
  {
    id: 'tab04',
    name: 'tab04',
    newsid: 221,
  },
  {
    id: 'tab05',
    name: 'tab05',
    newsid: 225,
  },
  {
    id: 'tab06',
    name: 'tab06',
    newsid: 208,
  },
  {
    id: 'tab07',
    name: 'tab07',
    newsid: 225,
  },
  {
    id: 'tab08',
    name: 'tab08',
    newsid: 208,
  },
  {
    id: 'tab09',
    name: 'tab09',
    newsid: 225,
  },
  {
    id: 'tab10',
    name: 'tab10',
    newsid: 208,
  },
]

function ontabtap(index: number) {
  if (tabIndex.value === index)
    return

  tabIndex.value = index

  scrollInto.value = `tab${index}`
}
</script>

<template>
  <view class="tabs">
    <scroll-view
      class="tab_bar"
      scroll-x="true"
      :show-scrollbar="false"
      :scroll-into-view="scrollInto"
      :scroll-with-animation="true"
    >
      <view
        v-for="(tab, index) in tabList"
        :id="`tab${index}`"
        :key="tab.id"
        class="tab_bar_item"
        @click="ontabtap(index)"
      >
        <text
          class="tab_bar_item_title"
          :class="tabIndex === index ? 'tab_bar_item_title_active' : ''"
        >
          {{ tab.name }}
        </text>
      </view>
      <view class="tab_bar_indicator" />
    </scroll-view>
    <uni-card title="基础卡片" sub-title="副标题" extra="额外信息" :thumbnail="avatar" @click="onClick">
      <text class="uni-body">
        这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。
      </text>
    </uni-card>
  </view>
</template>

<style lang="scss" scoped>
// /*每个页面公共css */
// .tab_bar ::-webkit-scrollbar {
//   display: none;
//   width: 0;
//   height: 0;
//   -webkit-appearance: none;
//   background: transparent;
//   color: transparent;
// }
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
  /* 隐藏滚动条，但依旧具备可以滚动的功能 */
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}

.tab_bar {
  white-space: nowrap;
  width: 100%;
  background: green;
}

.tab_bar_item {
  display: inline-block;
  margin-right: 80rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  font-size: 30rpx;
}

.tab_bar_indicator {
  width: 50rpx;
  height: 3rpx;
  background: red;
}

.tab_bar_item_title_active {
  color: red;
}
</style>

二、解决方案

设置伪元素

/*每个页面公共css */
.tab_bar ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}

---

总结

以上就是今天分享的内容，本文简单介绍了uniapp隐藏scroll-view滚动条解决方法。希望文章对你有所帮助。