完成首页设计
This commit is contained in:
parent
e0f4b807da
commit
1b3e5434b1
|
@ -0,0 +1,23 @@
|
|||
// components/poem-card/poem-card.js
|
||||
Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
poem: Object
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
|
||||
}
|
||||
})
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-tag": "tdesign-miniprogram/tag/tag",
|
||||
"t-check-tag": "tdesign-miniprogram/check-tag/check-tag"
|
||||
}
|
||||
}
|
|
@ -0,0 +1,15 @@
|
|||
<view class="poem-card">
|
||||
<view class="row-title">
|
||||
<text class="title">{{poem.title}}</text>
|
||||
<view class="tags-list">
|
||||
<t-tag class="margin-8" size="small" variant="light-outline" theme="primary">tag</t-tag>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row-author">
|
||||
<text class="author-name">{{poem.author.name}}</text>
|
||||
<text class="author-age">[{{poem.author.age}}]</text>
|
||||
</view>
|
||||
<view class="row-content">
|
||||
<text class="content" wx:for="{{poem.blocks}}" wx:for-item="block">{{block.content}}</text>
|
||||
</view>
|
||||
</view>
|
|
@ -0,0 +1,28 @@
|
|||
.poem-card {
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #D4D4D4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.row-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.row-author {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.row-content {
|
||||
font-size: 24rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
|
@ -0,0 +1,24 @@
|
|||
// components/poem-list/poem-list.js
|
||||
Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
poems: Array,
|
||||
status: Number
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
|
||||
}
|
||||
})
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"poem-card": "/components/poem-card/poem-card",
|
||||
"t-loading": "tdesign-miniprogram/loading/loading",
|
||||
"t-divider": "tdesign-miniprogram/divider/divider"
|
||||
}
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
<view class="poem-list-container">
|
||||
<poem-card wx:for="{{poems}}"
|
||||
wx:for-item="poem"
|
||||
wx:key="id"
|
||||
poem="{{poem}}" />
|
||||
<t-divider content="">
|
||||
<view slot="content">
|
||||
<text wx:if="{{status === 0}}">上划加载更多</text>
|
||||
<t-loading wx:if="{{status === 1}}" theme="spinner" size="30rpx" text="正在加载中..." />
|
||||
<text wx:if="{{status === 2}}">已经到底了</text>
|
||||
</view>
|
||||
</t-divider>
|
||||
</view>
|
|
@ -0,0 +1 @@
|
|||
/* components/poem-list/poem-list.wxss */
|
|
@ -0,0 +1,4 @@
|
|||
export default {
|
||||
backstageUrl: 'http://192.168.31.241:8080',
|
||||
ossUrl: ''
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
<t-tab-bar value="{{value}}" bindchange="onChange" theme="tag" split="{{false}}">
|
||||
<t-tab-bar value="{{value}}" bindchange="onChange" theme="tag" split="{{false}}" fixed="{{false}}">
|
||||
<t-tab-bar-item wx:for="{{list}}" wx:key="index" value="{{item.value}}" icon="-">
|
||||
<t-icon slot="icon" prefix="icon" name="{{item.icon}}" />
|
||||
{{item.label}}
|
||||
|
|
|
@ -1,66 +1,9 @@
|
|||
// pages/author-list/author-list.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
let page = getCurrentPages()[0].route
|
||||
this.getTabBar().setData({
|
||||
value: page
|
||||
})
|
||||
}
|
||||
})
|
|
@ -1,66 +1,9 @@
|
|||
// pages/favorite/favorite.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
let page = getCurrentPages()[0].route
|
||||
this.getTabBar().setData({
|
||||
value: page
|
||||
})
|
||||
}
|
||||
})
|
|
@ -1,10 +1,84 @@
|
|||
import request from "../../utils/request";
|
||||
|
||||
// pages/poem-list/poem-list.js
|
||||
Page({
|
||||
data: {
|
||||
category: [
|
||||
{id: 0, name: '推荐'},
|
||||
],
|
||||
tabDefaultValue: 0,
|
||||
// 当前所在分类
|
||||
currentCategory: 0,
|
||||
// 每页数量
|
||||
pageSize: 10,
|
||||
poems: [],
|
||||
// 刷新状态: 0-等待 1-加载中 2-到底了
|
||||
status: 0,
|
||||
page: 0,
|
||||
tbh: 0,
|
||||
},
|
||||
getPoemList: function (id, refresh=false) {
|
||||
// 修改状态
|
||||
this.setData({status: 1})
|
||||
// 添加分类ID
|
||||
let parmas= ''
|
||||
if (id !== 0) parmas = `categoryId=${id}&`
|
||||
// 刷新清空页面处理
|
||||
if (refresh) {
|
||||
this.setData({
|
||||
page: 1,
|
||||
poems: []
|
||||
})
|
||||
} else {
|
||||
this.setData({page: this.data.page + 1})
|
||||
}
|
||||
parmas += `pageNum=${this.data.page}&pageSize=${this.data.pageSize}`
|
||||
// 请求
|
||||
request(`/poem/poem/list?${parmas}`).then(res => {
|
||||
// 拼接页面
|
||||
let poems = this.data.poems.concat(res.data.rows)
|
||||
this.setData({
|
||||
poems: poems,
|
||||
status: res.data.rows.length < this.data.pageSize ? 2 : 0
|
||||
})
|
||||
})
|
||||
},
|
||||
// 更换分类
|
||||
changeCategorys(e) {
|
||||
let select = e.detail.value
|
||||
this.setData({
|
||||
currentCategory: select
|
||||
})
|
||||
this.getPoemList(select, true)
|
||||
},
|
||||
// 加载更多
|
||||
onReachBottom() {
|
||||
// 只用在待命状态才可进行刷新
|
||||
if (this.data.status === 0) {
|
||||
this.getPoemList(this.data.currentCategory)
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
/// Tab属性
|
||||
let page = getCurrentPages()[0].route
|
||||
console.log(page);
|
||||
this.getTabBar().setData({
|
||||
value: page
|
||||
})
|
||||
// 底部安全区计算
|
||||
wx.getSystemInfo().then(res => {
|
||||
let lift = res.screenHeight - res.safeArea.bottom
|
||||
this.setData({tbh: lift + 60})
|
||||
})
|
||||
// 刷新初始数据
|
||||
request('/poem/category/list').then(res => {
|
||||
let category = [{id: 0, name: '推荐'}]
|
||||
category = category.concat(res.data.rows)
|
||||
this.setData({
|
||||
category,
|
||||
tabDefaultValue: 0
|
||||
})
|
||||
})
|
||||
// 刷新全部诗词
|
||||
this.getPoemList(0)
|
||||
}
|
||||
})
|
|
@ -1,3 +1,7 @@
|
|||
{
|
||||
"usingComponents": {}
|
||||
"usingComponents": {
|
||||
"t-tabs": "tdesign-miniprogram/tabs/tabs",
|
||||
"t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
|
||||
"poem-list": "/components/poem-list/poem-list"
|
||||
}
|
||||
}
|
|
@ -1,2 +1,12 @@
|
|||
<!--pages/poem-list/poem-list.wxml-->
|
||||
<text>pages/poem-list/poem-list.wxml</text>
|
||||
<view class="page" style="{{'padding-bottom:' + tbh +'px;'}}">
|
||||
<t-tabs sticky="{{true}}"
|
||||
default-value="{{tabDefaultValue}}"
|
||||
bind:change="changeCategorys">
|
||||
<t-tab-panel wx:for="{{category}}"
|
||||
wx:for-item="item"
|
||||
label="{{item.name}}"
|
||||
wx:key="id"
|
||||
value="{{item.id}}" />
|
||||
</t-tabs>
|
||||
<poem-list poems="{{poems}}" status="{{status}}" />
|
||||
</view>
|
|
@ -1 +1,3 @@
|
|||
/* pages/poem-list/poem-list.wxss */
|
||||
.tabs {
|
||||
height: 100vh;
|
||||
}
|
|
@ -2,6 +2,20 @@
|
|||
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
||||
"projectname": "poem-native",
|
||||
"setting": {
|
||||
"compileHotReLoad": true
|
||||
"compileHotReLoad": true,
|
||||
"urlCheck": false
|
||||
},
|
||||
"condition": {
|
||||
"miniprogram": {
|
||||
"list": [
|
||||
{
|
||||
"name": "poem-list",
|
||||
"pathName": "pages/poem-list/poem-list",
|
||||
"query": "",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,14 @@
|
|||
import network from "../config/network";
|
||||
|
||||
export default function request(url, method = 'GET', data = {}, header = {}) {
|
||||
return new Promise((res, rej) => {
|
||||
wx.request({
|
||||
url: network.backstageUrl + url,
|
||||
method,
|
||||
data,
|
||||
header,
|
||||
success: res,
|
||||
fail: rej
|
||||
})
|
||||
})
|
||||
}
|
|
@ -14,6 +14,10 @@ const formatNumber = n => {
|
|||
return n[1] ? n : `0${n}`
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
formatTime
|
||||
const getTabbarHeight = () => {
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
formatTime,
|
||||
getTabbarHeight
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue