-
想要的效果 做成这种可以滚动选择的效果
-
html代码
<!-- 标题 -->
<div class="choose-title">选择路线</div>
<!-- 集货道名称 -->
<div class="track-group">
<div
class="track-item"
v-for="(item, index) in tracksList"
:key="index"
:class="item.isTrackSeleted ? 'choosed' : ''"
@click="tracksItemClick(item, index)"
>
{{ item.name }}
</div>
</div>
- css代码
.track-group {
// outline: 1px solid gray;
display: flex;
// 设置横向滚动
white-space: nowrap; //段落中文本不换行
overflow-x: scroll; //设置横向滚动
overflow-y: hidden; //禁止纵向滚动
text-align: justify; //文字平铺
justify-content: space-between;
}
// 隐藏滚动条
.track-group::-webkit-scrollbar {
display: none;
}
.track-item {
// outline: 1px solid blue;
// flex: 0 0 100px;
// 这是需要设置 flex-grow、flex-shrink为0,否则宽度设置会失效
width: 70px;
flex-grow: 0; //禁止自动增长
flex-shrink: 0; //禁止自动缩小
height: 38px;
text-align: center;
line-height: 38px;
background: #ffffff;
border: 1px solid #dfdfdf;
border-radius: 34px;
margin: auto 9px;
}
主要就是注意css样式
🔗1:参考链接
如果遇到使用display写样式,但是不能给子元素设置宽度,可以参考下篇文章
🔗2:flex布局:父元素设为flex,子元素设置宽度无效
2021/08/20 更新
写了个简单的横向拖动样式,大家可以参考,可以在它的基础上改成自己需要的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
/* 大盒子样式 */
.container-box {
outline: 1px solid orange;
width: 400px;
height: 200px;
}
/* 滚动栏 */
.track-group {
outline: 1px solid gray;
display: flex;
/* 设置横向滚动 */
/* 段落中文本不换行 */
white-space: nowrap;
/* 设置横向滚动 */
overflow-x: scroll;
/* 禁止纵向滚动 */
overflow-y: hidden;
/* 文字平铺 */
text-align: justify;
justify-content: space-between;
}
/* 隐藏滚动条 */
.track-group::-webkit-scrollbar {
display: none;
}
/* 每一个标题样式 */
.track-item {
width: 70px;
flex-grow: 0;
flex-shrink: 0;
height: 38px;
text-align: center;
line-height: 38px;
background: #ffffff;
border: 1px solid #dfdfdf;
border-radius: 34px;
margin: auto 9px;
}
</style>
</head>
<body>
<div id="app">
<div class="container-box">
<!-- 名称 -->
<p>选择项目</p>
<!-- 标题滚动栏 -->
<div class="track-group">
<div class="track-item" v-for="(item,index) in trackList" :key="index">
{{item.name}}
</div>
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
trackList: [
{ name: "A01" },
{ name: "A02" },
{ name: "A03" },
{ name: "A04" },
{ name: "A05" },
{ name: "A06" },
{ name: "A07" },
{ name: "A08" },
]
},
})
</script>
</body>
</html>