The detail page is a very common requirement in apps and small programs. As a common requirement, how to efficiently fulfill this requirement is extremely critical. This kind of page is often more complicated and involves multiple layouts, so how to implement a sliding layout from 0 to 1 in a small program? Please see this article
Show results
You can see that in this page, there are multiple layouts of tabs, ratings, comments, and tite. The layout is relatively complicated.
Details page wxml
<view class="item-header">
<view class="item-title">{
{item.title}} {
{item.original_title}}({
{item.year}})</view>
<view class='item-detail'>
<view class="left-detail">
<view class="item-rate">
<stars rate="{
{item.rating.value}}" starsize="30" fontsize="30" fontcolor="#595959"></stars>
<text class="comment-persons">{
{item.rating.value}}人评价</text>
</view>
<view class="item-sub-detail">
<view class="item-type">
{
{item.durations[0]}} {
{item.genres}}
</view>
<view class="item-show">
{
{item.pubdate[0]}}上映 {
{item.countries[0]}}
</view>
<view class="item-actors">
{
{item.authors}}
</view>
</view>
</view>
<view class='right-detail'>
<image src="{
{item.cover.image.small.url}}"></image>
</view>
</view>
</view>
<view class='item-tags'>
<view class='item-tags-title'>豆瓣成员常用标签</view>
<view class='item-tags-list'>
<text wx:for="{
{tags}}" wx:key="*this">{
{item}}</text>
</view>
</view>
<view class='comment-list-group'>
<view class='comment-title'>短评({
{totalComment}})</view>
<onecomment wx:for="{
{comments}}" item="{
{item}}"></onecomment>
</view>
<!-- 查看更多 -->
<navigator class='more-comment' url='/pages/comment/comment?id={
{id}}&type={
{type}}&thumbnail={
{item.cover.image.small.url}}&title={
{item.title}}&rate={
{item.rating.value}}'>查看更多短评</navigator>Here you can see a reference to a onecommet component
Let's take a look at the onecomment component layout wxml
<view class='comment-group'>
<view class='left-comment'>
<!-- 头像 -->
<image class="avatar" src="{
{item.user.avatar}}"></image>
</view>
<view class='right-comment'>
<view class='username-rate'>
<!-- 用户名 -->
<text class='username'>{
{item.user.name}}</text>
<!-- 评分 -->
<stars rate="{
{item.rating.value*2}}" starsize="30" istext='{
{false}}'></stars>
</view>
<!-- 评论时间 -->
<view class="release-time">{
{item.create_time}}</view>
<view class='content'>{
{item.comment}}</view>
</view>
</view>
Referenced components referenced in the detail page
{
"usingComponents": {
"stars": "/components/stars/stars",
"onecomment": "/components/onecomment/onecomment"
}
}As you can see here, two components are referenced here
Details page wxss
.item-header{
padding: 60rpx 30rpx;
}
.item-header .item-title{
font-size: 50rpx;
}
.item-header .item-detail{
display: flex;
justify-content: space-between;
margin-top: 20rpx;
}
.item-detail .left-detail{
flex: 1;
margin-right: 20rpx;
}
.left-detail .item-rate{
display: flex;
justify-content: flex-start;
align-items: center;
}
.item-rate .comment-persons{
font-size: 28rpx;
color: #ccc;
margin-left: 20rpx;
}
.item-detail .right-detail{
width: 200rpx;
height: 300rpx;
}
.right-detail image{
width: 100%;
height: 100%;
}
.item-sub-detail{
margin-top: 40rpx;
font-size: 32rpx;
}
.item-sub-detail view{
margin-bottom: 10rpx;
}
.item-tags{
padding: 0 30rpx;
}
.item-tags .item-tags-title{
color: #b3b3b3;
font-size: 32rpx;
margin-bottom: 20rpx;
}
.item-tags .item-tags-list{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.item-tags-list text{
padding: 10rpx 20rpx;
background: #f5f5f5;
font-size: 32rpx;
color: #353535;
text-align: center; /* 文字水平居中 */
border-radius: 40rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.comment-list-group{
padding: 60rpx 30rpx;
}
.comment-list-group .comment-title{
font-size: 32rpx;
color: #b3b3b3;
}
.more-comment{
text-align: center;
font-size: 36rpx;
color: #41be57;
margin-bottom: 60rpx;
}Let's take a look at the wxss layout of the onecomment component
.comment-group{
display: flex;
justify-content: flex-start;
padding-top: 40rpx;
}
.comment-group .left-comment{
width: 70rpx;
margin-right: 20rpx;
}
.left-comment .avatar{
width: 70rpx;
height: 70rpx;
border-radius: 50%;
}
.comment-group .right-comment{
flex: 1;
}
.right-comment .username-rate{
display: flex;
justify-content: flex-start;
align-items: center;
}
.username-rate .username{
font-size: 36rpx;
margin-right: 20rpx;
}
.release-time{
color: #b3b3b3;
font-size: 32rpx;
margin-top: 10rpx;
}
.content{
font-size: 32rpx;
color: #353535;
margin-top: 10rpx;
}Details page js
// pages/detail/detail.js
import {network} from "../../utils/network.js";
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
var type = options.type;
var id = options.id;
that.setData({
id: id,
type: type
});
network.getItemDetail({
type: type,
id: id,
success: function(item){
var genres = item.genres;
genres = genres.join("/");
item.genres = genres;
var actors = item.actors;
var actorNames = [];
if(actors.length > 3){
actors = actors.slice(0,3);
}
for(var index=0; index<actors.length; index++){
var actor = actors[index];
actorNames.push(actor.name);
}
actorNames = actorNames.join("/");
var director = item.directors[0].name;
var authors = director + "(导演) /" + actorNames;
item.authors = authors;
that.setData({
item: item
});
}
});
network.getItemTags({
type: type,
id: id,
success: function(tags){
that.setData({
tags: tags
});
}
});
// 获取评论
network.getItemComments({
type: type,
id: id,
success: function(data){
var totalComment = data.total;
var comments = data.interests;
that.setData({
totalComment: totalComment,
comments: comments
});
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
wx.pageScrollTo({
scrollTop: 0,
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})Such a detail page is realized