构建文章详情页面

由于通常我们的后端人员可能没办法先给我们提供数据，所以我们要采用先静后动的开发方式。
我们所要实现的效果，如图所示：
在这里插入图片描述
基础代码：

<view class="container"><image ></image><view><image></image>  <text></text><text>发表于</text><text></text></view><text></text><view><image></image><image></image></view><text></text>
</view>

完善内容的填充：

<view class="container"><image src="/images/bestplayers.jpg"></image><view><image src="/images/avatar/1.png"></image>  <text>微信</text><text>发表于</text><text>16小时前</text></view><text>LPL夏季赛最佳阵容</text><view><image src="/images/collection (2).png"></image><image src="/images/share.png"></image></view><text>8月9号，LPL常规赛收官之战结束，在事</text>
</view>

完成的效果：
在这里插入图片描述
接下来我们编写样式，使文章符合我们预期的效果，使用行的flex布局，设置顶部图片布满宽度，设置头像、作者、发表日期等的样式：

.container{display: flex;flex-direction: column;
}
.head-image{width: 100%;height: 460rpx;
}
.author-date{display: flex;flex-direction: row;align-items: center;margin-top: 20rpx;margin-left: 32rpx;
}
.avatar{width: 64rpx;height: 64rpx;
}
.author{font-size: 30rpx;font-weight: 300;margin-left: 20rpx;color: #666;
}
.const-text{font-size: 24rpx;color: #999;margin-left: 20rpx;
}
.date{font-size: 24rpx;margin-left: 30rpx;color: #999;
}

实现效果：
在这里插入图片描述

Flex的高级应用

如果我们想实现下面的效果，我们该怎么做？
在这里插入图片描述
横线没有必要再用一张图片来实现，我们可以通过css样式来实现，这里我们通过View来实现。该View是有长和宽的，同时再添加一下背景色，这样一条横线就实现了。align-items: center设置主轴， justify-content: center;设置交叉轴。为了实现图标往右靠，我们要设置图标容器的宽度，再设置justify-content: flex-end，通过设置z-index来实现横线被图标压在上面：

.tool{
.horizon{width: 660rpx;height: 1px;background-color: #e5e5e5;position: absolute;z-index: -99;}
.circle-img{height: 90rpx;width: 90rpx;
}
.circle{display: flex;width: 660rpx;flex-direction: row;justify-content: flex-end;}
.tool{display: flex;flex-direction: column;align-items: center;justify-content: center;
}}

  <view class="tool"><view class="circle"><image class="circle-img"src="/images/collection (2).png"></image><image class="circle-img" src="/images/share.png"></image></view><view class="horizon"></view></view>

在这里插入图片描述
我们也可以不用设置图标的样式，直接设置circle容器下的image标签的属性也可以实现图标样式：

.circle image{height: 90rpx;width: 90rpx;
}

设置文章样式：

.detail{color: #666;margin-left: 30rpx;margin-top: 20rpx;margin-right: 30rpx;line-height: 44rpx;letter-spacing: 2px;
}

最终总体实现效果：
在这里插入图片描述

组件的自定义属性data

由于我们文章详情页是可以由不同文章点击进来的，所以我们需要有文章的唯一ID号，当用户点击一篇文章后，我们获取到文章的id号，然后传入文章详情页。
在这里插入图片描述

那我们怎么在文章详情页获取到文章的id号呢？我们通过点击事件对象拿到id: 在这里插入图片描述

在这里插入图片描述

dataset
在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。
在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：
data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；
data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype 。