詳細ページは、アプリや小さなプログラムで非常に一般的な要件です。一般的な要件として、要件を効率的に満たす方法は非常に重要です。この種のページはより複雑で、複数のレイアウトが含まれることが多いので、小さなプログラムで0から1までのスライドレイアウトを実装するにはどうすればよいでしょうか。この記事をご覧ください
結果を示す
このページには、タブ、評価、コメント、タイトルの複数のレイアウトが含まれており、レイアウトが比較的複雑であることがわかります。
詳細ページ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"
}
}ここでわかるように、2つのコンポーネントがここで参照されています
詳細ページ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 () {
}
})そんなディテールページを実現