沃梦达 / IT编程 / 前端开发 / 正文

vue移动端可以左右滑动的滑块

//vue移动端可以左右滑动的滑块,百度看了好多,都是要下载v-touch来实现,总感觉不是很方便,所以用了css的方法来实现,下面是代码!!!templatedivdiv class=lateral-slidingdiv class=lateral-slidin...

//vue移动端可以左右滑动的滑块,百度看了好多,都是要下载v-touch来实现,总感觉不是很方便,所以用了css的方法来实现,下面是代码!!!
<template>
  <div>
   <div class="lateral-sliding">
    <div class="lateral-sliding-item">
      <div class="each">
        <span>户型</span>
        <span>三居</span>
      </div>
      <div class="each">
        <span>面积</span>
        <span>135m</span>
      </div>
      <div class="each">
        <span>地区</span>
        <span>保定</span>
      </div>
      <div class="each">
        <span>风格</span>
        <span>中式现代</span>
      </div>
      <div class="each">
        <span>预算</span>
        <span>6万</span>
      </div>
      <div class="each">
        <span>方式</span>
        <span>半包</span>
      </div>
    </div>
  </div>
  </div>
</template>

CSS

.lateral-sliding {
  width: 320px;
  height: 70px;
  border-radius:10px;
  border: 1px solid #888;
  display: flex;
  margin: 0 auto;
  overflow-y: hidden;
  overflow-x: scroll;
}
.lateral-sliding-item {
  display: flex;
  margin-right: 8px;
  background-color: #fff;
}
.each{
  width: 60px;
  display: flex;
  /* line-height: 30px; */
  flex-direction: column;
}
.each span{
  font-size: 12px;
  line-height: 20px;
  margin-top: 10px;
}

效果图

本文标题为:vue移动端可以左右滑动的滑块