vue移动端可以左右滑动的滑块 发布时间:2023/10/11 //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; } 复制代码 效果图