实现横线滚动-不显示滚动条 直接用

 

   <view class="country_box">
        <view
          class="country_item"
          v-for="item in countryList"
          :key="item.code"
          @click="transportTypeClick(item)"
        >
          <image
            :src="item.imgUrl"
            mode="widthFix"
            class="transport_type_img"
          ></image>
          <text class="transport_type_text">{{ item.info }}</text>
        </view>
      </view>


      countryList: [
        {
          code: 1,
          info: 'AA',
          imgUrl:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        },
        {
          code: 2,
          info: 'BB',
          imgUrl:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        },
        {
          code: 6,
          info: 'CC',
          imgUrl:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        },
        {
          code: 3,
          info: 'DD',
          imgUrl:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        },
        {
          code: 4,
          info: 'EE',
          imgUrl:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        },

        {
          code: 7,
          info: 'FF',
          imgUrl:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        },
        {
          code: 8,
          info: 'GG',
          imgUrl:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        },
        {
          code: 9,
          info: 'HH',
          imgUrl:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        }
      ],

    .country_box {
      display: flex; /* 子元素横向排列 */
      width: 697rpx;
      overflow-x: scroll; /* 横向滚动 */
      scrollbar-width: none; /* 隐藏滚动条 (适用于 Firefox) */
      -ms-overflow-style: none; /* 隐藏滚动条 (适用于 IE/Edge) */
      .country_item {
        width: 116.9rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
        .transport_type_img {
          width: 76rpx;
          height: 76rpx;
          margin-bottom: 7rpx;
        }
        .transport_type_text {
          display: inline-block;
          // width: 100rpx;
          height: 36rpx;
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 400;
          font-size: 25rpx;
          color: #282828;
          line-height: 36rpx;
          text-align: center;
          font-style: normal;
        }
      }
    }

    .country_box::-webkit-scrollbar {
      display: none; /* 隐藏滚动条 (适用于 Chrome/Safari) */
    }