- wxml代码
scroll-view可滚动视图区域。 scroll-x=“true” 允许横向滚动
<view class='container'>
<scroll-view class="image-group" scroll-x="true">
<view class="img-box">
<image src="../images/1.png"></image>
<text class='elli1'>白沙门公园</text>
<span>¥88</span>
<span> /每成人</span>
</view>
<view class="img-box">
<image src="../images/1.png"></image>
<text class='elli1'>白沙门公园</text>
<span>¥88</span>
<span> /每成人</span>
</view>
<view class="img-box">
<image src="../images/1.png"></image>
<text class='elli1'>白沙门公园白沙门公园白沙门公园</text>
<span>¥88</span>
<span> /每成人</span>
</view>
<view class="img-box">
<image src="../images/1.png"></image>
<text class='elli1'>白沙门公园</text>
<span>¥88</span>
<span> /每成人</span>
</view>
</scroll-view>
</view>
- wxss代码
.image-group{
display: flex;
white-space: nowrap;
margin-top: 30rpx;
}
.image-group .img-box{
width: 250rpx;
display: inline-block;
margin-right: 20rpx;
}
.img-box image{
width: 250rpx;
height: 180rpx;
border: 2rpx solid #e9e8e8;
box-sizing: border-box;
padding: 6rpx;
}
.img-box text{
font-size: 26rpx;
}
.img-box span{
display: inline;
}
.img-box span:first-of-type{
color: #d11515;
font-size: 30rpx;
}
.img-box span:last-child{
font-size: 22rpx;
color: #868686;
}