微信小程序scroll-view组件在安卓机上出现横向滚动条的解决办法

参考文档：安卓设备隐藏 scroll-view 滚动条，实测有效！

解决方案

放在全局即可

.scroll-view_H {
    ::-webkit-scrollbar {
        appearance: none;
        color: transparent;
        display: none;
        height: 0;
        width: 0;
    }
}

如何ios和安卓都显示滚动条呢？

安卓默认有，ios怎么添加呢？

下面为ChatGPT回复内容：

在 uni-app（微信小程序） 中，scroll-view 在 iOS 默认不显示横向滚动条，而 安卓会显示横向滚动条。你说你已经用了“让安卓不显示滚动条的方案”，现在你想 安卓和 iOS 都显示横向滚动条，那就需要用 自定义滚动条方案，因为：

❗ 重要事实

微信小程序原生 scroll-view：

• iOS 永远不显示横向滚动条（无法开启）
• 安卓默认会显示，也能用 CSS 隐藏
• 没有官方属性能让 iOS 显示原生滚动条

👉 所以如果你想两端都显示横向滚动条，只能自己做一个假的“自定义滚动条”。 官方 scroll-view 做不到。

---

✅ 推荐方案：自定义横向滚动条（通用解决方式）

通过监听 scroll-left 来同步滚动条的位置。

---

✔ 示例代码（可直接用）

template

<view class="scroll-wrapper">
  <scroll-view
    scroll-x
    class="scroll-view"
    @scroll="onScroll"
    @scrolltolower="onReachEnd"
  >
    <view class="scroll-content">
      <view v-for="item in 20" :key="item" class="item">
        {{ item }}
      </view>
    </view>
  </scroll-view>

  <!-- 自定义滚动条 -->
  <view class="custom-bar">
    <view
      class="custom-bar-thumb"
      :style="{ width: barWidth + 'rpx', left: barLeft + 'rpx' }"
    ></view>
  </view>
</view>

---

script

export default {
  data() {
    return {
      barWidth: 60,  // 滚动条滑块宽度
      barLeft: 0,    // 滚动条滑块位置
      scrollWidth: 1,
      viewWidth: 1,
    };
  },

  mounted() {
    this.$nextTick(() => {
      const query = uni.createSelectorQuery().in(this);
      query.select('.scroll-content').boundingClientRect(data => {
        this.scrollWidth = data.width;
      });
      query.select('.scroll-view').boundingClientRect(data => {
        this.viewWidth = data.width;
      });
      query.exec();
    });
  },

  methods: {
    onScroll(e) {
      const left = e.detail.scrollLeft;
      const maxScroll = this.scrollWidth - this.viewWidth;
      const maxBar = 750 - this.barWidth; // 页面宽度-滑块宽度

      this.barLeft = maxScroll > 0 ? (left / maxScroll) * maxBar : 0;
    },
  }
};

---

style

.scroll-wrapper {
  width: 100%;
  position: relative;
}

.scroll-view {
  white-space: nowrap;
}

.scroll-content {
  display: inline-flex;
}

.item {
  width: 200rpx;
  height: 200rpx;
  background-color: #f2f2f2;
  margin-right: 20rpx;
  text-align: center;
  line-height: 200rpx;
}

.custom-bar {
  height: 8rpx;
  width: 100%;
  background: #eee;
  margin-top: 10rpx;
  position: relative;
  border-radius: 8rpx;
  overflow: hidden;
}

.custom-bar-thumb {
  height: 100%;
  background: #999;
  border-radius: 8rpx;
  position: absolute;
  left: 0;
}

---

📌 总结（让你快速做决策）

需求	官方支持？	解决方案
安卓显示横向滚动条	✔ 默认就有	不用管
iOS 显示横向滚动条	❌ 官方不支持	只能自定义滚动条
两端统一效果	❌ 原生不行	✔ 自定义滚动条

---

如果你愿意，我可以：

✅ 给你做一个更漂亮的滚动条（圆角 + 动画） ✅ 给多个 scroll-view 重用的 mixin 或组件 ✅ 和你的页面 UI 风格对齐

想让我帮你封装成一个可复用组件吗？