效果图:
说明:看到效果图时,我们可能首先想到swiper组件实现,但是在实际开发中发现swiper-item的间距是无法实现的。这时我们可以用scroll-view去模拟实现。
<scroll-view scroll-x style='display: flex;white-space:nowrap;' class='swiperFuns'>
<view class="swiper-slide">
<image class="img" src="../../images/pinz1.png" mode="aspectFill"></image>
<view class="descs">
<text class="tit">全案设计</text>
<text class="info">50万家庭选择的高品质整体家装</text>
</view>