uniapp滚动组件scroll-view

 

//scroll-x="true"  || scroll-y="true"

<view class="scroll-view">
<scroll-view class="scroll_box" scroll-x="true" scroll-left="0">
<view class="scroll_box">
<view v-for="(item, index) in dataList" :key="index" class="scroll_bg">
<image :src="item.src"></image>
<text>{{item.text}}</text>
</view>
</view>
</scroll-view>
</view>

 

//去除滚动条

/deep/::-webkit-scrollbar {
display: none;
width: 0 !important;
height:0 !important;
-webkit-appearance: none;
background: transparent;
height:auto;
}

.scroll-view {
width: 700rpx;
margin: auto;
.scroll_box {
display: flex;
height: 200rpx;
margin-left: -50rpx;
.scroll_bg {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 200rpx;
height: 200rpx;
image {
width: 100rpx;
height: 100rpx;
border: 2rpx solid #eaeaea;
border-radius: 50rpx;
}

text {
width: 200rpx;
text-align: center;
}
}
}
}