构建文章详情页面
由于通常我们的后端人员可能没办法先给我们提供数据,所以我们要采用先静后动的开发方式。
我们所要实现的效果,如图所示:
基础代码:
<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 。
在界面onload函数中获取查询参数
页面与页面之间通信通过url来传递:
我们在页面加载的onload的函数中的options参数就可以拿到传过来的参数:
加载详情数据并填充页面
同样我们要导入数据的js文件
我们通过对应的id号来从List中获取数据:
接着我们再在页面的wxml绑定对应的动态数据,这样我们就能实现点击文章跳转到对应的文章详情页: