下面以图片为例:
<!--wxml代码-->
<scroll-view scroll-x="true" class="swiperImgList">
<image src="../../../../images/imgnull.png"></image>
<image src="../../../../images/imgnull.png"></image>
<image src="../../../../images/imgnull.png"></image>
</scroll-view>
<!--wxss代码-->
.swiperImgList{
width: 686rpx;
display: flex;
white-space: nowrap;
}
.swiperImgList image{
width: 200rpx;
height: 200rpx;
margin-right: 24rpx;
}
/*
.swiperImgList>image{
width: 200rpx;
height: 200rpx;
margin-right: 24rpx;
}
*/
主要注意点
1、scroll-x属性需要写上去
2、使用display:flex 让图片横向排列
3、使用 white-space: nowrap,让图片不换行
4、wxss样式中 经过踩坑发现 使用子选择符‘>’无效(例如:.swiperImgList>image 如wxss中注释的代码,相同样式却没有任何效果 目前问官方了还未回复,有答案了再追加上)解决方法可以使用后代选择符