详情页是app,小程序中非常常见的一个需求,作为常见的需求,如何高效地完成该需求的实现,就异常关键。这种页面往往比较复杂,涉及多种布局,那么小程序中如何从0到1实现滑动布局呢?请看本文
效果展示
可以看到这个页面里面,涉及了tab,评分,评论,tite多种布局,布局相对复杂
详情页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>
这里可以看到引用了一个onecommet的组件
下面来看一下onecomment组件布局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>
详情页引用的引用的组件
{
"usingComponents": {
"stars": "/components/stars/stars",
"onecomment": "/components/onecomment/onecomment"
}
}
这里可以看到,这里引用了两个组件
详情页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;
}
下面来看一下onecomment组件的wxss布局
.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;
}
详情页的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 () {
}
})
这样的一个详情页就实现了