结果示例图
conversation.png
思路
善用flex
- 对row左右对开
- 东边上面对开
- 东北角左右分散对齐
<!-- 每一行 -->
<view class="row" wx:for="{{list}}" wx:key="" bindtap="rowTapped" data-id="{{item.id}}">
<!-- 头像 -->
<image src="{{item.head_img_url}}" />
<!-- 名称与语句 -->
<view class="content">
<view class="top">
<view class="nickname">{{item.nickname}}</view>
<view class="datetime">{{item.datetime}}</view>
</view>
<view class="bottom">
<view class="sentence">{{item.last_content}}</view>
</view>
</view>
</view>
wxss
/*首页样式*/
/*单元行*/
.row {
display: flex;
flex-direction: row;
align-items: center;
margin: 0 30rpx;
border-bottom: 1px solid #e8e8e8;
}
/*头像*/
.row image {
width: 100rpx;
height: 100rpx;
border-radius: 50rpx;
margin: 20rpx;
}
/*主体*/
.content {
display: flex;
flex-direction: column;
width: 76%;
padding-left: 20rpx;
}
/*昵称与日期*/
.top, .bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
/*昵称*/
.nickname {
color: #4d4d4d;
font-size: 36rpx;
}
/*日期*/
.datetime {
padding: 10rpx;
font-size: 26rpx;
color: #b2b2b2;
}
/*话语*/
.sentence {
color: #ccc;
font-size: 28rpx;
margin-top: 6rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
技术点
1.flex
电梯直达：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
2.字符串截取
在上述css代码中
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
用处是将过多的文本变成...，并且只有一占据一行
3.圆角图标
border-radius = width / 2
