当前位置：公众IT > 技术文章 > 小白求助怎么让①商品标题接着楼号后面写，写不下的部分再换行写 ②垂直方向上商品能够首尾相连？

小白求助怎么让①商品标题接着楼号后面写，写不下的部分再换行写 ②垂直方向上商品能够首尾相连？

新闻来源：互联网资料整理发布时间：2023/4/5 13:14:53 共计：4625 浏览

前言：

9小时前小编发现微信小程序用户：【陈凯】提出了一个关于“小白求助怎么让①商品标题接着楼号后面写，写不下的部分再换行写 ②垂直方向上商品能够首尾相连？”的问题,在问题中开发者陈凯对该问题做了如下阐述：

问题类型：

API和组件:

问题描述：

该图片引用微信开放社区

<view class=“vbig”><!– 商品标题和标签区域 –>

<view class=“list” wx:for=“{{list}}” wx:key=“_id”><!– 循环渲染每个商品组合 –>

<image src=‘{{item.img1}}’ mode=“aspectFill” class=“img1-img”></image><!– 商品图片 –>

<view class=“titlegroup”><!– 颜色标签和商品标题区域 –>
<view class=“tradeway” wx:if=“{{item.tradeway}}”>{{item.tradeway}}</view><!– 送货上门标签 –>
<view class=“{{item.stubudidx==1? ‘girlbud’:item.stubudidx==2? ‘girlbud’:item.stubudidx==3? ‘boybud’:item.stubudidx==4? ‘boybud’:item.stubudidx==5? ‘girlbud’:item.stubudidx==6? ‘girlbud’:item.stubudidx==7? ‘girlboybud’:’boyboybud’}}”>{{item.stubud}}</view>
<!– 控制楼号标签的不同样式 –>
<view class=“title”>{{item.title}}</view><!– 商品标题 –>
</view>

.vbig{
width: 690rpx;
margin: 30rpx;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}/* 总区域 */
.list{
width: 335rpx;
margin-bottom: 40rpx;
}/* 循环渲染每个商品组合 */
.tradeway{
background-color: #FFD700;
width: 90rpx;
height: 32rpx;
border-radius: 8rpx;
font-size: 20rpx;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
color:white;
}/* 送货上门标签 */
.title{
font-size: 28rpx;
font-weight: bold;
}/* 商品标题 */