Vue横向滚动-组件(web,uniapp)
【代码】Vue横向滚动-组件(web,uniapp)
·
实现代码
<div style="display: flex">
<div class="flexStyle">
<div
v-for="index in list"
:key="index.id"
style="margin-right: 20px;display: flex;">
<img class="contentStyle" :src="index.picurl "/>
<div style="display: flex; flex-direction: column; ">
<span>{{index.name}}</span>
<span>{{index.eglish_name}}</span>
</div>
</div>
</div>
</div>
<style>
.flexStyle {
width: 95%;
height: 80px;
display: flex;
/* justify-content: space-between; */
/* 设置超出滚动 */
overflow-x: auto;
}
.contentStyle {
width: 50px;
height: 50px;
display: inline-block;
background: #a3a2a2;
/* 超出滚动的关键,没有它元素会自动缩小,不会滚动 */
flex-shrink: 0;
margin-right: 10px;
}
::-webkit-scrollbar {
/* 隐藏滚动条 */
display: none;
}
</style>
uniapp
<scroll-view class="scroll" scroll-x scroll-y style="margin-top: 50px;">
<view class="group">
<view class="item">A</view>
<view class="item">B</view>
<view class="item">C</view>
<view class="item">D</view>
<view class="item">E</view>
<view class="item">F</view>
<view class="item">G</view>
</view>
</scroll-view>
.scroll {
border: 1px solid red;
box-sizing: border-box;
height: 120upx;
.group {
white-space: nowrap;
.item {
width: 120upx;
height: 120upx;
background-color: bisque;
display: inline-block;
margin-right: 10upx;
}
}
}
实现效果
效果
更多推荐
已为社区贡献1条内容
所有评论(0)