实现代码 
  <div style="display: flex">
    <div class="flexStyle">
      <div
        v-for="index in list"
        :key="index.id"
        style="margin-right: 20px;display: flex;">

        <img class="contentStyle" :src="index.picurl "/>

        <div style="display: flex; flex-direction: column; ">
          <span>{{index.name}}</span>
          <span>{{index.eglish_name}}</span>
        </div>

      </div>
    </div>
  </div>
<style>
.flexStyle {
  width: 95%;
  height: 80px;
  display: flex;
  /* justify-content: space-between; */
  /* 设置超出滚动 */
  overflow-x: auto;
}

.contentStyle {
  width: 50px;
  height: 50px;
  display: inline-block;
  background: #a3a2a2;
  /* 超出滚动的关键,没有它元素会自动缩小,不会滚动 */
  flex-shrink: 0;
  margin-right: 10px;
}

::-webkit-scrollbar {
  /* 隐藏滚动条 */
  display: none;
}
</style>

 

uniapp

<scroll-view class="scroll" scroll-x scroll-y style="margin-top: 50px;">
	<view class="group">
		<view class="item">A</view>
		<view class="item">B</view>
		<view class="item">C</view>
		<view class="item">D</view>
		<view class="item">E</view>
		<view class="item">F</view>
		<view class="item">G</view>
	</view>
</scroll-view>
  .scroll {
    border: 1px solid red;
    box-sizing: border-box;
    height: 120upx;
    .group {
      white-space: nowrap;
      .item {
        width: 120upx;
        height: 120upx;
        background-color: bisque;
        display: inline-block;
        margin-right: 10upx;
      }
    }
  }

实现效果

 效果

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐