废话不多说先看效果!
这个布局如何实现对于新手的我来说还是比较难的 研究了半天搞出来了
<view class = "view-groupComponent">
<view class = "view-component">
<view class = "view-componentL">
<view class = "view-mixtureImg">
<image src="../../images/head.jpg" class = "img-rectStyle" ></image>
<image src="../../images/icon_champion.png" class = "img-wrapRect" ></image>
</view>
<view >
<text class = "text-ellipsiStyle">青春梦想队</text>
</view>
</view>
样式
/*图像*/
.view-mixtureImg{
height: 200rpx;
}
.img-rectStyle{
width: 170rpx;
height: 170rpx;
border-radius: 15rpx;
}
.img-inside{
width: 180rpx;
height: 180rpx;
border-radius: 50%;
}
/*外部边框图*/
.img-wrap{
width: 260rpx;
height: 200rpx;
position: relative;
bottom: 200rpx;
text-align: center;
}
还有另一种效果
布局
<block wx:for="{{groups}}" wx:key = "{{index}}">
<view class = "view-groupItem">
<view class = "view-memberClickNum">
<image src="{{item.groupImg}}"></image>
<text class = "text-itemNum">0</text>
</view>
<text class="text-groupName">{{item.groupName}}</text>
</view>
</block>
样式
/*用户的图像*/
.view-groupItem{
display: inline-block;
width: 115rpx;
height: 120rpx;
margin: 10rpx;
text-align: center;
margin-top: 20rpx;
}
.view-memberClickNum{
position: relative;
}
.view-memberClickNum image{
width: 115rpx;
height: 115rpx;
border-radius: 15rpx;
}
.text-groupName{
font-size: 26rpx;
width: 115rpx;
display: block;
overflow: hidden;
color: #978378;
word-break: keep-all;
white-space: nowrap;
text-overflow: ellipsis;
}