(四)、首页持续完善【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】

1，引入uview组件tabs标签

1.1，代码

template内容代码：

 <!-- 引入uview组件tabs标签 -->
    <view class="topnav">
      <u-tabs :list="navlist" :activeStyle="{
    				color: '#333',
    				fontWeight: 'bold',
    				transform: 'scale(1.08)'
    			}" :inactiveStyle="{
    				color: '#888',
    				transform: 'scale(1)'
    			}" @click="clickNav"></u-tabs>
    </view>

js内容代码：

<script>
  export default {
    data() {
      return {
        navlist: [{
            name: "最新",
            type: "publish_date"
          },
          {
            name: "热门",
            type: "view_count",
            badge: {
              isDot: true
            }
          }
        ]
      };
    },
    onLoad() {

    },
    methods: {
      clickNav(e) {
        console.log(e)
      },
    }
  };
</script>

css内容代码：

<style lang="scss" scoped>
  .home {
    .topnav {
      margin-bottom: 30rpx;
    }
  }
</style>

1.2，效果

2，引入uview组件Skeleton 骨架屏

template内容代码：

    <!-- 引入uview组件Skeleton 骨架屏 -->
    <view class="loadingState" v-show="loadState">
      <u-skeleton rows="4" title loading></u-skeleton>
    </view>

data中定义loadStae属性

loadState: false

css样式

    .loadingState {
      padding: 30rpx;
    }

效果：

3，中间内容部分抽离为公共组件

3.1，新建blog-item子组件

首先在项目根目录下新建文件夹components
然后在components文件夹中新建子组件blog-item：

3.2，blog-item子组件完整代码

<template>
  <view class="blogitem">
    <!-- 头部用户信息 -->
    <view class="head">
      <view class="userinfo">
        <!-- 右边头像 -->
        <view class="avatar">
          <image src="../../static/images/pic2.jpg" mode="aspectFill"></image>
        </view>
        <!-- 右边用户名称 -->
        <view class="name">
          wangwu
        </view>
        <!-- 右边时间  定制格式化 -->
        <view class="time">
          <uni-dateformat :date="Date.now()" format="MM月dd hh:mm" :threshold="[60000,3600000*24*30]"></uni-dateformat>
        </view>
      </view>
      <!-- 左边 三个点  更多 -->
      <view class="more" @click="clickMore">
        <text class="iconfont icon-ellipsis"></text>
      </view>
    </view>
    <!-- 中间内容 -->
    <view class="body">
      <!-- 上 标题 -->
      <view class="title">title</view>
      <!-- 中 内容 -->
      <view class="text">
        <view class="t">descriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescription</view>
      </view>
      <!-- 下 缩略图 -->
      <view class="piclist">
        <view class="pic" :class="picArr.length==1 ? 'only': ''" v-for="(item,index) in picArr" :key="index">
          <image src="../../static/images/pic2.jpg" mode="aspectFill"></image>
        </view>
      </view>
    </view>
    <!-- 底部 信息内容 -->
    <view class="info">
      <!-- 游览量 -->
      <view class="box">
        <text class="iconfont icon-a-27-liulan"></text> <text>232</text>
      </view>
      <!-- 评论数 -->
      <view class="box">
        <text class="iconfont icon-a-5-xinxi"></text>
        <text>232评论</text>
      </view>
      <!-- 点赞量 -->
      <view class="box">
        <text class="iconfont icon-a-106-xihuan"></text>
        <text>22点赞</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "blog-item",
    data() {
      return {
        picArr: [1, 2, 3]
      };
    }
  }
</script>

<style lang="scss">
  .blogitem {
    .head {
      display: flex;
      font-size: 32rpx;
      align-items: center;
      justify-content: space-between;
      .userinfo {
        display: flex;
        align-items: center;
        .avatar {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          border-radius: 50%;
          overflow: hidden;
          image {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .name {
          color: #222;
          padding-left: 10rpx;
        }
        .time {
          color: #888;
          font-size: 22rpx;
          padding-left: 20rpx;
        }
      }
      .more {
        padding: 5rpx;
        .iconfont {
          font-size: 50rpx;
          color: #888;
        }
      }
    }
    .body {
      padding: 15rpx 0 30rpx;
      .title {
        font-size: 44rpx;
        color: #000;
        font-weight: 600;
        text-align: justify;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .text {
        padding-top: 10rpx;
        padding-bottom: 10rpx;
        font-size: 30rpx;
        text-align: justify;
        color: #888;
        .t {
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
      .piclist {
        display: flex;
        padding-top: 20rpx;
        .pic {
          width: 225rpx;
          height: 225rpx;
          margin-right: 6rpx;
          overflow: hidden;
          image {
            width: 100%;
            height: 100%;
          }
          &:first-child {
            border-radius: 20rpx 0 0 20rpx;
          }
          &:last-child {
            border-radius: 0 20rpx 20rpx 0;
          }
          &.only {
            border-radius: 20rpx;
          }
        }
      }
    }
    .info {
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 26rpx;
      color: #333;
      .box {
        display: flex;
        align-items: center;
        padding: 15rpx 0 5rpx;
        flex: 1;
        display: flex;
        justify-content: center;
        .iconfont {
          font-size: 40rpx;
          padding-right: 10rpx;
        }
      }
      .box.active {
        color: #0199FE
      }
    }
  }
</style>