feat: 添加 page-container 组件并更新相关页面以使用该组件
This commit is contained in:
熊熊熊子路
@@ -9,10 +9,7 @@
|
||||
"pages/four/index"
|
||||
],
|
||||
"window": {
|
||||
"navigationStyle": "default",
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTitleText": "My Weapp Template"
|
||||
"navigationStyle": "custom"
|
||||
},
|
||||
"tabBar": {
|
||||
"custom": true,
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"lazyCodeLoading": "requiredComponents",
|
||||
"usingComponents": {
|
||||
"t-navbar": "tdesign-miniprogram/navbar/navbar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/* components/page-container/page-container.wxss */
|
||||
|
||||
.page-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page-container__content {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
// components/page-container/page-container.ts
|
||||
|
||||
Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
// 导航栏标题
|
||||
title: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
// 是否显示返回按钮
|
||||
leftArrow: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
// 导航栏是否固定
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
// 导航栏占位
|
||||
placeholder: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
// 是否适配安全区域顶部
|
||||
safeAreaInsetTop: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
// 导航栏层级
|
||||
zIndex: {
|
||||
type: Number,
|
||||
value: 10000,
|
||||
},
|
||||
// 是否带动画效果
|
||||
animation: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
// 后退的层数
|
||||
delta: {
|
||||
type: Number,
|
||||
value: 1,
|
||||
},
|
||||
// 标题最大长度，超出用 "…" 表示
|
||||
titleMaxLength: {
|
||||
type: Number,
|
||||
value: undefined,
|
||||
},
|
||||
// 是否显示导航栏
|
||||
visible: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
// 导航栏背景色
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
value: '#ffffff',
|
||||
},
|
||||
// 导航栏文本颜色（标题、返回按钮等）
|
||||
textColor: {
|
||||
type: String,
|
||||
value: '#000000',
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
// 是否显示返回按钮（根据页面栈判断）
|
||||
showLeftArrow: true,
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件生命周期函数
|
||||
*/
|
||||
lifetimes: {
|
||||
// 组件实例进入页面节点树时执行
|
||||
attached() {
|
||||
// 判断是否显示返回按钮
|
||||
this.checkShowLeftArrow()
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 属性观察器
|
||||
*/
|
||||
observers: {
|
||||
// 监听 visible 和 leftArrow 变化，重新判断是否显示返回按钮
|
||||
'visible, leftArrow'() {
|
||||
this.checkShowLeftArrow()
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
/**
|
||||
* 检查是否显示返回按钮
|
||||
* 如果页面栈中只有一个页面，或者 visible 为 false，则不显示返回按钮
|
||||
*/
|
||||
checkShowLeftArrow() {
|
||||
const pages = getCurrentPages()
|
||||
const leftArrow = this.properties.leftArrow
|
||||
const visible = this.properties.visible
|
||||
const showLeftArrow = pages.length > 1 && leftArrow && visible
|
||||
this.setData({
|
||||
showLeftArrow,
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回按钮点击事件
|
||||
*/
|
||||
goBack() {
|
||||
const pages = getCurrentPages()
|
||||
const delta = this.properties.delta
|
||||
if (pages.length > 1 && delta > 0) {
|
||||
wx.navigateBack({
|
||||
delta,
|
||||
success: (res) => {
|
||||
// 转发成功事件
|
||||
this.triggerEvent('success', res)
|
||||
// 转发完成事件
|
||||
this.triggerEvent('complete', res)
|
||||
},
|
||||
fail: (err) => {
|
||||
// 转发失败事件
|
||||
this.triggerEvent('fail', err)
|
||||
// 转发完成事件
|
||||
this.triggerEvent('complete', err)
|
||||
},
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理返回成功事件（从 t-navbar 转发）
|
||||
*/
|
||||
handleBackSuccess(e: WechatMiniprogram.CustomEvent) {
|
||||
this.triggerEvent('success', e.detail)
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理返回失败事件（从 t-navbar 转发）
|
||||
*/
|
||||
handleBackFail(e: WechatMiniprogram.CustomEvent) {
|
||||
this.triggerEvent('fail', e.detail)
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理返回完成事件（从 t-navbar 转发）
|
||||
*/
|
||||
handleBackComplete(e: WechatMiniprogram.CustomEvent) {
|
||||
this.triggerEvent('complete', e.detail)
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,35 @@
|
||||
<!--components/page-container/page-container.wxml-->
|
||||
<view class="page-container">
|
||||
<!-- 导航栏 -->
|
||||
<t-navbar
|
||||
title="{{title}}"
|
||||
left-arrow="{{showLeftArrow}}"
|
||||
fixed="{{fixed}}"
|
||||
placeholder="{{placeholder}}"
|
||||
safe-area-inset-top="{{safeAreaInsetTop}}"
|
||||
z-index="{{zIndex}}"
|
||||
animation="{{animation}}"
|
||||
delta="{{delta}}"
|
||||
title-max-length="{{titleMaxLength}}"
|
||||
visible="{{visible}}"
|
||||
bind:go-back="goBack"
|
||||
bind:success="handleBackSuccess"
|
||||
bind:fail="handleBackFail"
|
||||
bind:complete="handleBackComplete"
|
||||
style="--td-navbar-color: {{textColor}};--td-navbar-bg-color: {{backgroundColor}};"
|
||||
>
|
||||
<!-- 左侧自定义内容插槽 -->
|
||||
<slot name="left" slot="left"></slot>
|
||||
<!-- 胶囊区域自定义内容插槽 -->
|
||||
<slot name="capsule" slot="capsule"></slot>
|
||||
<!-- 标题自定义内容插槽 -->
|
||||
<slot name="title" slot="title"></slot>
|
||||
</t-navbar>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<view
|
||||
class="page-container__content"
|
||||
>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
@@ -1,3 +1,5 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
"usingComponents": {
|
||||
"page-container": "../../components/page-container/page-container"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,18 +2,6 @@
|
||||
.container {
|
||||
padding: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section {
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
<!--pages/date/date.wxml-->
|
||||
<page-container title="日期时间格式化示例" backgroundColor="#123321" textColor="#ffffff">
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<text class="title">日期时间格式化示例</text>
|
||||
</view>
|
||||
|
||||
<!-- formatTime 函数示例 -->
|
||||
<view class="section">
|
||||
<view class="section-title">formatTime 函数示例</view>
|
||||
@@ -72,3 +69,4 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</page-container>
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"navigationBarTextStyle": "black",
|
||||
"usingComponents": {
|
||||
"page-container": "../../components/page-container/page-container",
|
||||
"t-input": "/miniprogram_npm/tdesign-miniprogram/input/input",
|
||||
"t-button": "/miniprogram_npm/tdesign-miniprogram/button/button"
|
||||
}
|
||||
|
||||
@@ -2,32 +2,11 @@
|
||||
|
||||
// 容器样式
|
||||
.login-container {
|
||||
min-height: 100vh;
|
||||
background: white;
|
||||
background: #aabbcc;
|
||||
padding: 40rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 头部标题区域
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 60rpx;
|
||||
|
||||
.title {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 28rpx;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
// 功能区块样式
|
||||
.form-section {
|
||||
background: #ffffff;
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
<!--pages/login/login.wxml-->
|
||||
<page-container title="Request 使用示例">
|
||||
<view class="login-container">
|
||||
<!-- 标题区域 -->
|
||||
<view class="header">
|
||||
<text class="title">Request.ts 使用示例</text>
|
||||
<text class="subtitle">演示网络请求封装的各种用法</text>
|
||||
</view>
|
||||
|
||||
<!-- 登录表单区域 -->
|
||||
<view class="form-section">
|
||||
<view class="section-title">1. POST 请求示例 - 登录</view>
|
||||
@@ -32,3 +27,4 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</page-container>
|
||||
|
||||
Reference in New Issue
Block a user