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

//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移动端可以左右滑动的滑块相关推荐

Vue实现移动端开屏广告+滑动登录
Vue实现了移动端开屏广告+滑动登录 2020-03-16 颓废了一天,今天做一个移动端的小Demo,因为脚手架占的空间比较大,就使用引入cdn的方式了,方便快捷一点.先上效果图源码在https:/ ...
android vue.js点击反应慢,解决vue 界面在苹果手机上滑动点击事件等卡顿问题
用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题, ( ...
vue移动端表格吸顶、行自适应高度、列左侧固定悬浮
简介 1.表头吸顶效果 2.左侧列固定,右侧滑动,表头跟随内容滑动 3.行高自适应番外最近上海疫情,居家办公一月多了,愿阴霾散去.最近网上在正常得市民抱怨中,有很多别有用心之人,数典忘祖,造谣生事 ...
vue移动端项目日历组件，月周切换，点击进入上/下一个月
项目场景: Vue移动端项目的日历组件,移动端如果没有别的特别要求,一般用vant中的日历组件就OK,这里用的另一个.组件是网上找的,原网址:vue-hash-calendar,需要的请自行去看. 我 ...
鼠标滚轮更改transform的值（vue-scroller在PC端的上下滑动）
目前上拉刷新,下拉加载,以及区域回弹的组件,绝大多数都是通过transform去实现的.在移动端效果很好,但是PC端使用鼠标拖拽的方式,查看下文首先不符合逻辑,其次容易点进其他页面. 起初,项目的初衷 ...
vue移动端去哪儿旅游网
##vue移动端去哪儿旅游网说明: 1.该项目是对移动端去哪儿网的仿写,实现了从首页.城市选择.详情页面,是一个前后端分离的开源目,实现了前端内容的编写. 2.主要技术栈:Vue+Vue-route ...
vue 移动端触摸事件
原文链接: vue 移动端触摸事件上一篇: vue 一次失败的dom游戏制作下一篇: grid 布局模拟游戏面板实现一个可以拖动的小球点击时小球会移动到点击的位置触摸移动时小球会跟着移动 ...
Vue移动端项目---尚硅谷外卖
文章目录 Vue移动端项目--尚硅谷外卖项目目录结构介绍移动端适配头部和底部导航登录注册页面密码登录短信登录 Profile页面未登录已登录 Msite页面首页导航 ShopList ...
完美解决vue项目中弹出框滑动时，内部页面也跟着滑动问题
完美解决vue项目中弹出框滑动时,内部页面也跟着滑动问题参考文章: (1)完美解决vue项目中弹出框滑动时,内部页面也跟着滑动问题 (2)https://www.cnblogs.com/qhanti ...
解决vue移动端适配问题
解决vue移动端适配问题参考文章: (1)解决vue移动端适配问题 (2)https://www.cnblogs.com/both-eyes/p/10106021.html 备忘一下.

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

vue移动端可以左右滑动的滑块相关推荐

最新文章

热门文章