uniapp+vue2+json-server+uView项目(day5)

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情

上一篇文章中我们使用了uView组件库当中的模态框以及按钮这两个组件，然后还发送了delete请求让用户删除此类文章的推荐，具体的实现样式如下图所示：

接下来将介绍这个文章列表的css样式布局以及文章详情页的id接收

• 首先我们给每一篇文章绑定跳转详情页的时候都会传入这篇文章的唯一id，以便于点击文字跳转的时候跳转到对应的详情页，绑定事件跳转页面的方法的代码如下所示：

toDetail(id) {
      uni.navigateTo({ url: "../tabbar-3-release/newsDetail?id=" + id });
    },

这里跳转的页面我们需要创建一下，新建vue页面，不要勾选创建同名目录

创建页面完成了之后我们需要再pages.json中进行配置，配置的代码如下图所示：

• 文章列表的样式布局即文章标题和发布时间，浏览数，来源为一个view盒子，图片和按钮为一个盒子，然后两个盒子放在一个大的盒子里进行display:flex布局，这里有个css常用的样式套路，就是文字超过多少行就显示省略号的布局，我们需要把文字设置为 display: -webkit-box;布局，然后设置显示多少行后显示省略号，然后设置超出的部分隐藏显示，具体的实现代码如下所示：

 .title {
      font-weight: bold;
      font-size: 34rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }