在开发小程序或者h5页面的时候,会有遇到开发一个横向滚动列表
如:
所以我们用到了uniapp的scroll-view组件
官方文档:https://uniapp.dcloud.io/component/scroll-view
实现横向滚动必须设置
<scroll-view class='scrollContainer' scroll-x>
<view class='scrollitem' v-for="(item, index) in goodsArr" :key="index" @click="getItem(item)">
<image class="scrollimage" :src="item.contentPic"></image>
<view class="recommandItemText">{{item.contentTitle}}</view>
</view>
<view class="EmptyData" v-if="goodsArr.length==0">暂无数据</view>
</scroll-view>
// 容器
.scrollContainer {
width: 666rpx;
height: 234rpx;
white-space: nowrap;
}
// 容器项
.scrollitem {
display: inline-block;
margin-left: 30rpx;
height: 234rpx;
}
.scrollimage {
width: 270rpx;
height: 154rpx;
}
.recommandItemText {
width: 270rpx;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.EmptyData {
text-align: center;
margin-top: 50rpx;
}