微信小程序（第十九章）- 用户评价页面实现

页面结构的实现

代码如下：

<!--用户评价-->
<view id="reviewView">
    <!--标题-->
    <view id="titleView">用户评价</view>
    <!--用户评论项-->
    <view class="reviewItemView">
        <view>匿名用户</view>
        <view>昨天</view>
        <view>很好用，可以随时观察孩子到校出校动态！</view>
    </view>
    <view class="reviewItemView">
        <view>匿名用户</view>
        <view>昨天</view>
        <view>很好用！</view>
    </view>
    <view class="reviewItemView">
        <view>匿名用户</view>
        <view>昨天</view>
        <view>推荐使用！</view>
    </view>
</view>

页面样式实现

/*用户评价*/
.reviewItemView{
    padding:20rpx 0;
    border-bottom: 1rpx solid #f1f1f1;
    position: relative;
}
.reviewItemView > view:nth-child(1){
    font-size: 24rpx;
    color: #9f9f9f;
}
.reviewItemView > view:nth-child(2){
    font-size: 24rpx;
    position:absolute;
    top:20rpx;
    right:30rpx;
    color:#9f9f9f
}
.reviewItemView > view:nth-child(3){
    font-size: 30rpx;
    padding-top: 20rpx;
}

五角星实现

参考文档

代码如下：

<!--用户评价-->
<view id="reviewView">
    <!--用户评论项-->
    <view class="reviewItemView">
        <view class="userNameView">
            匿名用户 
            <view>        
                <view class="star"><view class="icon icon_yellow"></view></view>
                <view class="star"><view class="icon icon_yellow"></view></view>
                <view class="star"><view class="icon icon_yellow"></view></view>
                <view class="star"><view class="icon icon_yellow"></view></view>
                <view class="star"><view class="icon icon_yellow"></view></view>
            </view>        
        </view>
        <view>昨天</view>
        <view>很好用，可以随时观察孩子到校出校动态!</view>
    </view>
    <view class="reviewItemView">
        <view class="userNameView">
            匿名用户 
            <view>        
                <view class="star"><view class="icon icon_yellow"></view></view>
                <view class="star"><view class="icon icon_yellow"></view></view>
                <view class="star"><view class="icon icon_yellow"></view></view>
                <view class="star"><view class="icon icon_yellow"></view></view>
                <view class="star"><view class="icon icon_gray"></view></view>
            </view>        
        </view>
        <view>昨天</view>
        <view>很好用！</view>
    </view>
    <view class="reviewItemView">
        <view class="userNameView">
            匿名用户 
            <view>        
                <view class="star"><view class="icon icon_yellow"></view></view>
                <view class="star"><view class="icon icon_yellow"></view></view>
                <view class="star"><view class="icon icon_yellow"></view></view>
                <view class="star"><view class="icon icon_yellow"></view></view>
                <view class="star"><view class="icon icon_yellow"></view></view>
            </view>        
        </view>
        <view>昨天</view>
        <view>推荐使用！</view>
    </view>
    <!--查看更多-->
    <view id="moreView" bindtap="goHotArticlePage">
        <text>查看更多</text>
        <view class="arrow"></view>
    </view>
</view>

/*用户评价*/
.reviewItemView{
    padding:20rpx 0;
    border-bottom: 1rpx solid #f1f1f1;
    position: relative;
}
.reviewItemView > view:nth-child(1){
    font-size: 24rpx;
    color: #9f9f9f;
}
.reviewItemView > view:nth-child(2){
    font-size: 24rpx;
    position:absolute;
    top:20rpx;
    right:30rpx;
    color:#9f9f9f
}
.reviewItemView > view:nth-child(3){
    font-size: 30rpx;
    padding-top: 20rpx;
}
@font-face {  
    font-family: 'FontAwesome';  
    src: url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1') format('woff'); 
  }
.userNameView{
    position:relative;
}
.userNameView > view{
    display: flex;
    position:absolute;
    left:130rpx;
    top:6rpx;
}
  .star{margin-right:4rpx;}/*五角星之间的间距*/
  /*五角星*/
  .star .icon:before {
    content: '\f005'; 
    font-family: FontAwesome; 
    position: absolute;
    left: 0;
    top: 0;
    display: block;  
    overflow: hidden;
}
  .star .icon {
      display: block;
      font-size: 24rpx; 
      text-align: center; 
      width: 24rpx;
      height: 24rpx;
      line-height: 24rpx;
      position: relative;
      white-space: pre;
    }
  /*灰色五角星*/
  .star .icon_gray{color:#dddddd}
  /*黄色五角星*/
  .star .icon_yellow:before {color: #fed300;}
  #moreView{
    height:88rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    color: #a6a6a6;
    position: relative;
  }
  .arrow{
    width: 16rpx;
    height:16rpx;
    border-top:4rpx solid #999;
    border-right: 4rpx solid #999;
    /*旋转45度*/
    transform:rotate(45deg);
    /*调整位置*/
    position:absolute;
    right:30rpx;
    top:38rpx;
  }