skyline如果文本布局复杂的情况下,无法达到预期效果。
预期效果
目前的解决方案就是【ANESSA】前面加了nbsp;空格来达到缩进效果
希望官网text组件支持text-indent属性
less:
.product-name-skyline {
padding-top: 12rpx;
box-sizing: border-box;
width: 100%;
color: #222222;
font-size: 28rpx;
line-height: 38rpx;
height: 88rpx;
.ip-pic,
.ip-label {
position: absolute;
}
.brand-name {
font-weight: bold;
margin-right: 10rpx;
}
.ip-pic {
display: inline-block;
width: @ipPicWidth;
height: 28rpx;
transform: translateY(4rpx);
}
}
wxml:
<view wx:if="{{isSkyline}}" class="product-name-skyline">
<!-- 这里的图片标签要设置为绝对定位 -->
<image wx:if="{{ipLabeStyle.pic && product.showIpLabelImage}}" class="ip-pic" src="{{ipLabeStyle.pic}}" mode="heightFix"/>
<text overflow="ellipsis" max-lines="2">
<!-- 注意:空格不要删 目前通过输入多个空格来达到缩进的效果 Skyline目前text不支持缩进text-indent这个属性 -->
<text wx:if="{{product.brandShowName && product.showIpLabelImage}}" decode="{{true}}" class="brand-name"> {{product.brandShowName}}</text>
<text>{{product.title}}</text>
</text>
</view>
看了文档,text可以内嵌span组件, 可以达到预期效果
https://developers.weixin.qq.com/miniprogram/dev/component/text.html?property=skyline
新增 span 组件用于内联文本和图片,如 <span> <image> </image> <text>bar</text> </span>
修正方案后:
<text overflow="ellipsis" max-lines="2"> <span> <image wx:if="{{ipLabeStyle.pic && product.showIpLabelImage}}" class="ip-pic" src="{{ipLabeStyle.pic}}" mode="heightFix"></image> <text>{{product.brandShowName}}</text> <text>{{product.title}}</text> </span> </text>