uniapp项目的文章详情页页面布局(day10)

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

上一篇文章中我们获取到了传过来的id参数值并且通过reques发送get请求的时候携带了这个id参数获取到了相应的文章内容，获取到的res数据如下图所示：

接下来我们只需要通过v-for循环将数据渲染到页面上即可，具体的详情页的样式如下图所示：

• 这里的数据因为是图文穿插的展示出来的，这里建议大家使用uView的富文本解析器，然后样式会好看一些，富文本解析的官网地址为：www.uviewui.com/components/… ，我这里就不使用了
• 我们需要使用v-for循环detailsNews这个文章内容数组，然后将每一个属性都item.的形式展示到页面上，注意图片要通过冒号：动态绑定src路径，具体的实现代码如下所示：

 <view v-for="(item, index) in detailNews" :key="index">
      <view>
        <img class="cover" :src="item.img" alt="" />
      </view>
      <view class="title">
        {{ item.title }}
      </view>
      <view> 文章来源：{{ item.author }} </view>
      <view> 发布时间：{{ item.time }} </view>
      <view> 阅读人数：{{ item.num }} </view>
      <view class="content1">
        {{ item.content1 }}
      </view>
      <img class="img" :src="item.img" alt="" />
      <view class="content2">
        {{ item.content2 }}
      </view>
      <img class="img" :src="item.pic1" alt="" />
    </view>

• 然后文章的封面需要设置模糊背景用来衬托出文章标题，模糊背景的设置的css代码就是filter: blur(4px);这个数值越大越模糊，然后文章标题的背景是一个阴影效果，为了让标题更加突出清晰，阴影背景效果的实现css代码就是： background-color: rgba(0, 0, 0, 0.5);然后每一段有一个首行缩进，css代码就是 text-indent: 2em;