Vue横向滚动-组件（web，uniapp）

最新推荐文章于 2024-05-22 13:52:22 发布

moqi陌

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量767

点赞数 2

文章标签： vue.js javascript 前端 css scss 前端框架

本文链接：https://blog.csdn.net/weixin_54627737/article/details/131545845

版权

实现代码

  <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;
      }
    }
  }