小程序实现经典的列表页

结果示例图

conversation.png

思路

善用flex

1. 对row左右对开
2. 东边上面对开
3. 东北角左右分散对齐

<!-- 每一行 -->
<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