mpvue小程序功能：左右滚动
结构
<!--新品首发 -->
<div class="newgoods">
<div class="newgoods-top" @click="goodsList('new')">
<div class="top">
<p>新品首发</p>
<p>查看全部</p>
</div>
</div>
<div class="list">
<ul>
<scroll-view class="scroll-view" :scroll-x="true">
<li v-for="(item ,index) in newGoods" :key="index">
<img :src="item.list_pic_url" alt />
<p>{{item.name}}</p>
<p>{{item.goods_brief}}</p>
<p>¥{{item.retail_price}}</p>
</li>
</scroll-view>
</ul>
</div>
</div>
样式
.newgoods {
width: 100%;
&-top {
margin-top: 20rpx;
height: 260rpx;
width: 100%;
background: url('../../../static/images/bgnew.png') no-repeat;
background-size: 100% 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
.top {
p {
color: #8c9bae;
font-size: 32rpx;
}
p:nth-child(2) {
width: 180rpx;
height: 50rpx;
line-height: 50rpx;
margin: 27rpx auto 0 auto;
font-size: 22rpx;
background: #d8e4f0;
}
}
}
// 左右滚动
.list {
margin-top: 20rpx;
background-color: #fff;
padding-bottom: 10rpx;
ul {
.scroll-view {
width: 100%;
white-space: nowrap;
li {
width: 280rpx;
height: 416rpx;
margin: 5rpx 0 5rpx 25rpx;
display: inline-block;
img {
width: 280rpx;
height: 280rpx;
}
p {
width: 94%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 8rpx;
text-indent: 1em;
}
p:nth-child(2) {
font-size: 30rpx;
font-weight: bold;
}
p:nth-child(3) {
font-size: 24rpx;
color: #8a8a8a;
}
p:nth-child(4) {
font-size: 24rpx;
color: #9c3232;
}
}
}
}
}
}
