滑块--简装

最新推荐文章于 2024-11-01 16:54:21 发布

前端老五

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量68

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/m0_46512929/article/details/120757159

版权

"这是一个关于Vue.js的博客，展示了如何使用`v-for`指令创建一个滑动展示的组件。每个滑动项用`<div class="deal">`包裹，点击事件`swiperHandle`处理交互。样式设计注重灵活性和用户体验，包括设置弹性布局、隐藏滚动条、定义单元格尺寸、边距、圆角、内边距、文字对齐等细节，确保了组件的视觉效果和交互体验。"

摘要由CSDN通过智能技术生成

<template>
  <div class="transaction">
    <div
      class="deal"
      v-for="(item, index) in banliList"
      :key="index"
      @click="swiperHandle(item)"
    >
      <img :src="item.img" alt class="swiper-img" />
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.transaction {
  display: flex;
  flex-wrap: nowrap;
  padding: 0.435rem 0.3rem;
  overflow: auto;
  position: relative;
}
 /*更改默认滚动条样式-webkit-scrollbar */
.transaction::-webkit-scrollbar {
  display: none;
}
.deal {
  flex-shrink: 0;
  position: relative;
  width: 2.22rem;
  height: 2.07rem;
  /* margin-left: 0.1rem; */
  padding: 0.2rem 0.3rem;
  text-align: center;
  border-radius: 0.15rem;
  font-size: 0.48rem;
  /* background: #f5f5f5; */
  border: 0.03rem solid #f5f5f5;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>