微信小程序 中 ScrollView 的 不同手机型号 的显示隐藏

出现了个问题？？ 在taro ui 中，使用了ScrollView 这个组件 ，但是会在不同型号手机上面出现滚动条

有问题

无问题

好，看代码

这个是最开始的写法，但是会发现在小米系列手机上面不生效

于是查资料

1.小程序中，有一个属性 enhanced 这个是增强属性

写上之后发现也没有用

2.于是又百度查

这个是他们的 scrollview 的伪元素 把他们隐藏起来

  .scroll-view ::-webkit-scrollbar {
    display: none;
    /* 隐藏滚动条 */
    width: 0;
    height: 0;
    color: transparent;
  }

但是发现还是没有效果

3.最后又查到

appearance: none; color: transparent !important;

  .scroll-view ::-webkit-scrollbar {
    appearance: none;
    display: none;
    /* 隐藏滚动条 */
    width: 0;
    height: 0;
    color: transparent !important;
  }

于是到这里 就成功了

最后贴上全部代码

 <ScrollView
        className='flex-row scroll-view'
        style={{ width: '100%', boxSizing: 'content-box' }}
        showScrollbar={false}
        enhanced
        scrollWithAnimation
        scrollX
        scrollY={false}
        scrollLeft={scrollLeft}
      >
        {items.map((item, index) => (
          <Text
            id={`${idPre}${item.category_id}`}
            key={index}
            className={classNames(
              'hm-margin-r--xs',
              'hm-padding--xs',
              'sp-chips-item',
              defaultSelectedChip == item.value ? 'is-active' : ''
            )}
            onClick={() => handleSelect(item.value)}
          >
            {item.label}
          </Text>
        ))}
      </ScrollView>
      

.sp-chips {
  white-space: nowrap;
  width: 100%;
  Text {
    display: inline-block;
  }
  .sp-chips-item {
    border: 2px solid var(--helper-view, #000);
  }
  .is-active {
    background: var(--helper-view, #000);
    color: var(--Base-colors-Interactive-Primary-Reverse-Default, #fff);
  }
  .scroll-view ::-webkit-scrollbar {
    appearance: none;
    display: none;
    /* 隐藏滚动条 */
    width: 0;
    height: 0;
    color: transparent !important;
  }
}