first commit
This commit is contained in:
143
miniprogram/components/bottom-modal/bottom-modal.js
Normal file
143
miniprogram/components/bottom-modal/bottom-modal.js
Normal file
@@ -0,0 +1,143 @@
|
||||
Component({
|
||||
options: {
|
||||
// 关键修改：设置样式隔离选项
|
||||
styleIsolation: 'shared' // 完全共享页面和组件样式
|
||||
},
|
||||
properties: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer: function (newVal) {
|
||||
if (newVal) {
|
||||
this.showModal();
|
||||
} else {
|
||||
this.hideModal();
|
||||
}
|
||||
}
|
||||
},
|
||||
modalContentClass: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
data: {
|
||||
animationClass: 'modal-transition', // 保持过渡效果类
|
||||
containerHeight: '25vh', // 设置为1/4屏幕高度
|
||||
initialTranslate: '100%', // 初始在屏幕外
|
||||
startY: 0, // 触摸起始位置
|
||||
currentState: 'hidden', // 'hidden', 'bottom', 'half', 'full'
|
||||
states: {
|
||||
bottom: { height: '25vh', translate: '0' }, // 1/4屏幕高度，设置translate为0使其正确显示在底部
|
||||
full: { height: '100vh', translate: '0' } // 全屏高度
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showModal() {
|
||||
this.setData({
|
||||
visible: true,
|
||||
currentState: 'bottom', // 默认显示1/4屏幕高度
|
||||
containerHeight: this.data.states['bottom'].height,
|
||||
initialTranslate: this.data.states['bottom'].translate
|
||||
});
|
||||
},
|
||||
hideModal() {
|
||||
this.setData({
|
||||
initialTranslate: '100%', // 设置为底部位置
|
||||
currentState: 'hidden'
|
||||
});
|
||||
setTimeout(() => {
|
||||
if (this.data.currentState === 'hidden') {
|
||||
this.setData({ visible: false });
|
||||
}
|
||||
}, 300); // 与动画时间一致
|
||||
},
|
||||
onHideModal() {
|
||||
this._triggerCloseEvent();
|
||||
},
|
||||
|
||||
// 遮罩层点击事件（如果有遮罩层的话）
|
||||
onOverlayTap() {
|
||||
this._triggerCloseEvent();
|
||||
},
|
||||
|
||||
// 共用的关闭事件触发方法
|
||||
_triggerCloseEvent() {
|
||||
this.triggerEvent('close');
|
||||
},
|
||||
preventTouchMove() {},
|
||||
onTouchStart(e) {
|
||||
this.setData({ startY: e.touches[0].clientY });
|
||||
this.setData({ animationClass: '' }); // 开始拖动时移除过渡效果，使拖动更跟手
|
||||
},
|
||||
onTouchMove(e) {
|
||||
if (!this.data.visible) return;
|
||||
|
||||
const currentY = e.touches[0].clientY;
|
||||
const deltaY = currentY - this.data.startY;
|
||||
let newTranslate = '';
|
||||
|
||||
// 根据当前状态和拖动方向计算新的位移
|
||||
if (this.data.currentState === 'full') {
|
||||
newTranslate = `calc(0px + ${deltaY}px)`; // 从全屏位置开始拖
|
||||
} else if (this.data.currentState === 'bottom') {
|
||||
newTranslate = `calc(75vh + ${deltaY}px)`; // 从1/4屏幕高度位置开始拖
|
||||
}
|
||||
|
||||
// 限制拖动范围，不能拖出屏幕顶部或底部之外
|
||||
if (this.data.currentState === 'full' && parseInt(newTranslate) > 0) {
|
||||
newTranslate = '0';
|
||||
} else if (this.data.currentState === 'bottom' && deltaY < -300) {
|
||||
// 向下拖动不超过屏幕
|
||||
newTranslate = 'calc(75vh - 300px)';
|
||||
}
|
||||
|
||||
this.setData({ initialTranslate: newTranslate });
|
||||
},
|
||||
onTouchEnd(e) {
|
||||
const endY = e.changedTouches[0].clientY;
|
||||
const deltaY = endY - this.data.startY;
|
||||
const threshold = 50; // 判断状态切换的阈值
|
||||
|
||||
// 根据拖动距离和方向，以及当前状态，决定下一个状态
|
||||
let nextState = this.data.currentState;
|
||||
if (Math.abs(deltaY) > threshold) {
|
||||
if (deltaY > 0) { // 向下拖
|
||||
if (this.data.currentState === 'full') {
|
||||
nextState = 'bottom';
|
||||
}
|
||||
} else { // 向上拖
|
||||
if (this.data.currentState === 'bottom') {
|
||||
nextState = 'full';
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 拖动距离小于阈值，则回到当前状态
|
||||
nextState = this.data.currentState;
|
||||
}
|
||||
|
||||
// 在切换状态前，添加过渡动画类
|
||||
this.setData({
|
||||
animationClass: 'modal-transition'
|
||||
}, () => {
|
||||
// 在回调中执行状态切换，确保动画类已经设置
|
||||
this.switchToState(nextState);
|
||||
});
|
||||
},
|
||||
switchToState(state) {
|
||||
if (state === 'hidden') {
|
||||
this.hideModal();
|
||||
return;
|
||||
}
|
||||
const targetState = this.data.states[state];
|
||||
if (targetState) {
|
||||
this.setData({
|
||||
currentState: state,
|
||||
containerHeight: targetState.height,
|
||||
initialTranslate: targetState.translate
|
||||
});
|
||||
// 通知父组件状态变化
|
||||
this.triggerEvent('stateChange', { state: state });
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
14
miniprogram/components/bottom-modal/bottom-modal.json
Normal file
14
miniprogram/components/bottom-modal/bottom-modal.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {},
|
||||
"componentGenerics": {
|
||||
"selectable": true
|
||||
},
|
||||
"styleIsolation": "shared",
|
||||
"externalClasses": [
|
||||
"modal-content-class",
|
||||
"modal-header-class",
|
||||
"modal-basic-info-class",
|
||||
"modal-detail-info-class"
|
||||
]
|
||||
}
|
||||
19
miniprogram/components/bottom-modal/bottom-modal.wxml
Normal file
19
miniprogram/components/bottom-modal/bottom-modal.wxml
Normal file
@@ -0,0 +1,19 @@
|
||||
<view wx:if="{{visible}}" class="modal-overlay bottom-modal" bindtap="onHideModal">
|
||||
<view
|
||||
class="modal-container {{animationClass}} {{modalContentClass}}"
|
||||
style="height: {{containerHeight}}; transform: translateY({{initialTranslate}});"
|
||||
bindtouchstart="onTouchStart"
|
||||
bindtouchmove="onTouchMove"
|
||||
bindtouchend="onTouchEnd"
|
||||
catchtap="preventTouchMove"
|
||||
>
|
||||
<!-- 拖动指示器 -->
|
||||
<view class="modal-handle"></view>
|
||||
|
||||
<!-- 内容区域（使用slot让父组件可以自定义内容） -->
|
||||
<slot></slot>
|
||||
|
||||
<!-- 关闭按钮 -->
|
||||
<view class="modal-close" bindtap="onHideModal">×</view>
|
||||
</view>
|
||||
</view>
|
||||
169
miniprogram/components/bottom-modal/bottom-modal.wxss
Normal file
169
miniprogram/components/bottom-modal/bottom-modal.wxss
Normal file
@@ -0,0 +1,169 @@
|
||||
/* 添加组件样式隔离设置 */
|
||||
:host {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: transparent;
|
||||
z-index: 9998;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
.modal-handle {
|
||||
width: 80rpx;
|
||||
height: 8rpx;
|
||||
background-color: #dcdcdc;
|
||||
border-radius: 4rpx;
|
||||
margin: 24rpx auto;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 40rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
/* 确保modal-container样式优先级 */
|
||||
.modal-container {
|
||||
padding: 30rpx !important;
|
||||
background-color: #fff !important;
|
||||
border-radius: 30rpx !important;
|
||||
overflow: hidden !important;
|
||||
position: relative !important;
|
||||
z-index: 100 !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* 内部元素样式 - 提高选择器优先级 */
|
||||
.modal-header {
|
||||
margin-bottom: 20rpx !important;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 36rpx !important;
|
||||
font-weight: bold !important;
|
||||
margin-bottom: 10rpx !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
font-size: 28rpx !important;
|
||||
color: #666 !important;
|
||||
margin-bottom: 20rpx !important;
|
||||
}
|
||||
|
||||
.modal-basic-info {
|
||||
margin-bottom: 20rpx !important;
|
||||
}
|
||||
|
||||
.modal-detail-info {
|
||||
transition: all 0.3s ease-in-out !important;
|
||||
}
|
||||
|
||||
/* 货运人员头部样式 */
|
||||
.delivery-person-header {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 20rpx !important;
|
||||
margin-bottom: 20rpx !important;
|
||||
}
|
||||
|
||||
.delivery-person-avatar {
|
||||
width: 120rpx !important;
|
||||
height: 120rpx !important;
|
||||
border-radius: 50% !important;
|
||||
overflow: hidden !important;
|
||||
background-color: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
.delivery-person-avatar image {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.person-info-header {
|
||||
flex: 1 !important;
|
||||
}
|
||||
|
||||
/* 信息项样式 */
|
||||
.detail-item {
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
align-items: center !important;
|
||||
padding: 16rpx 0 !important;
|
||||
border-bottom: 1rpx solid #f0f0f0 !important;
|
||||
}
|
||||
|
||||
.detail-item:last-child {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 28rpx !important;
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 28rpx !important;
|
||||
color: #333 !important;
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
/* 状态徽章样式 */
|
||||
.status-badge {
|
||||
padding: 6rpx 20rpx !important;
|
||||
border-radius: 20rpx !important;
|
||||
font-size: 24rpx !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.status-idle {
|
||||
background-color: #e6f7ff !important;
|
||||
color: #1890ff !important;
|
||||
}
|
||||
|
||||
.status-busy {
|
||||
background-color: #fff2e8 !important;
|
||||
color: #fa8c16 !important;
|
||||
}
|
||||
|
||||
.status-delivering {
|
||||
background-color: #f6ffed !important;
|
||||
color: #52c41a !important;
|
||||
}
|
||||
|
||||
.status-offline {
|
||||
background-color: #f5f5f5 !important;
|
||||
color: #8c8c8c !important;
|
||||
}
|
||||
105
miniprogram/components/navigation-bar/navigation-bar.js
Normal file
105
miniprogram/components/navigation-bar/navigation-bar.js
Normal file
@@ -0,0 +1,105 @@
|
||||
"use strict";
|
||||
Component({
|
||||
options: {
|
||||
multipleSlots: true // 在组件定义时的选项中启用多slot支持
|
||||
},
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
extClass: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
back: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
homeButton: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
animated: {
|
||||
// 显示隐藏的时候opacity动画效果
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
show: {
|
||||
// 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
|
||||
type: Boolean,
|
||||
value: true,
|
||||
observer: '_showChange'
|
||||
},
|
||||
// back为true的时候，返回的页面深度
|
||||
delta: {
|
||||
type: Number,
|
||||
value: 1
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
displayStyle: ''
|
||||
},
|
||||
lifetimes: {
|
||||
attached() {
|
||||
const rect = wx.getMenuButtonBoundingClientRect();
|
||||
wx.getSystemInfo({
|
||||
success: (res) => {
|
||||
const isAndroid = res.platform === 'android';
|
||||
const isDevtools = res.platform === 'devtools';
|
||||
this.setData({
|
||||
ios: !isAndroid,
|
||||
innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`,
|
||||
leftWidth: `width: ${res.windowWidth - rect.left}px`,
|
||||
safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px` : ``
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
_showChange(show) {
|
||||
const animated = this.data.animated;
|
||||
let displayStyle = '';
|
||||
if (animated) {
|
||||
displayStyle = `opacity: ${show ? '1' : '0'};transition:opacity 0.5s;`;
|
||||
}
|
||||
else {
|
||||
displayStyle = `display: ${show ? '' : 'none'}`;
|
||||
}
|
||||
this.setData({
|
||||
displayStyle
|
||||
});
|
||||
},
|
||||
back() {
|
||||
const data = this.data;
|
||||
if (data.delta) {
|
||||
wx.navigateBack({
|
||||
delta: data.delta
|
||||
});
|
||||
}
|
||||
this.triggerEvent('back', { delta: data.delta }, {});
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {}
|
||||
}
|
||||
96
miniprogram/components/navigation-bar/navigation-bar.less
Normal file
96
miniprogram/components/navigation-bar/navigation-bar.less
Normal file
@@ -0,0 +1,96 @@
|
||||
.weui-navigation-bar {
|
||||
--weui-FG-0:rgba(0,0,0,.9);
|
||||
--height: 44px;
|
||||
--left: 16px;
|
||||
}
|
||||
.weui-navigation-bar .android {
|
||||
--height: 48px;
|
||||
}
|
||||
|
||||
.weui-navigation-bar {
|
||||
overflow: hidden;
|
||||
color: var(--weui-FG-0);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.weui-navigation-bar__inner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: calc(var(--height) + env(safe-area-inset-top));
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: env(safe-area-inset-top);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.weui-navigation-bar__left {
|
||||
position: relative;
|
||||
padding-left: var(--left);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.weui-navigation-bar__btn_goback_wrapper {
|
||||
padding: 11px 18px 11px 16px;
|
||||
margin: -11px -18px -11px -16px;
|
||||
}
|
||||
|
||||
.weui-navigation-bar__btn_goback_wrapper.weui-active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.weui-navigation-bar__btn_goback {
|
||||
font-size: 12px;
|
||||
width: 12px;
|
||||
height: 24px;
|
||||
-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
|
||||
mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
|
||||
-webkit-mask-size: cover;
|
||||
mask-size: cover;
|
||||
background-color: var(--weui-FG-0);
|
||||
}
|
||||
|
||||
.weui-navigation-bar__center {
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.weui-navigation-bar__loading {
|
||||
margin-right: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.weui-loading {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
background: transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
|
||||
background-size: 100%;
|
||||
margin-left: 0;
|
||||
animation: loading linear infinite 1s;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
105
miniprogram/components/navigation-bar/navigation-bar.ts
Normal file
105
miniprogram/components/navigation-bar/navigation-bar.ts
Normal file
@@ -0,0 +1,105 @@
|
||||
Component({
|
||||
options: {
|
||||
multipleSlots: true // 在组件定义时的选项中启用多slot支持
|
||||
},
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
extClass: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
back: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
homeButton: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
animated: {
|
||||
// 显示隐藏的时候opacity动画效果
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
show: {
|
||||
// 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
|
||||
type: Boolean,
|
||||
value: true,
|
||||
observer: '_showChange'
|
||||
},
|
||||
// back为true的时候，返回的页面深度
|
||||
delta: {
|
||||
type: Number,
|
||||
value: 1
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
displayStyle: ''
|
||||
},
|
||||
lifetimes: {
|
||||
attached() {
|
||||
const rect = wx.getMenuButtonBoundingClientRect()
|
||||
wx.getSystemInfo({
|
||||
success: (res) => {
|
||||
const isAndroid = res.platform === 'android'
|
||||
const isDevtools = res.platform === 'devtools'
|
||||
this.setData({
|
||||
ios: !isAndroid,
|
||||
innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`,
|
||||
leftWidth: `width: ${res.windowWidth - rect.left }px`,
|
||||
safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px` : ``
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
_showChange(show: boolean) {
|
||||
const animated = this.data.animated
|
||||
let displayStyle = ''
|
||||
if (animated) {
|
||||
displayStyle = `opacity: ${
|
||||
show ? '1' : '0'
|
||||
};transition:opacity 0.5s;`
|
||||
} else {
|
||||
displayStyle = `display: ${show ? '' : 'none'}`
|
||||
}
|
||||
this.setData({
|
||||
displayStyle
|
||||
})
|
||||
},
|
||||
back() {
|
||||
const data = this.data
|
||||
if (data.delta) {
|
||||
wx.navigateBack({
|
||||
delta: data.delta
|
||||
})
|
||||
}
|
||||
this.triggerEvent('back', { delta: data.delta }, {})
|
||||
}
|
||||
},
|
||||
})
|
||||
64
miniprogram/components/navigation-bar/navigation-bar.wxml
Normal file
64
miniprogram/components/navigation-bar/navigation-bar.wxml
Normal file
@@ -0,0 +1,64 @@
|
||||
<view class="weui-navigation-bar {{extClass}}">
|
||||
<view class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}" style="color: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}; {{safeAreaTop}};">
|
||||
|
||||
<!-- 左侧按钮 -->
|
||||
<view class='weui-navigation-bar__left' style="{{leftWidth}};">
|
||||
<block wx:if="{{back || homeButton}}">
|
||||
<!-- 返回上一页 -->
|
||||
<block wx:if="{{back}}">
|
||||
<view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_goback">
|
||||
<view
|
||||
bindtap="back"
|
||||
class="weui-navigation-bar__btn_goback_wrapper"
|
||||
hover-class="weui-active"
|
||||
hover-stay-time="100"
|
||||
aria-role="button"
|
||||
aria-label="返回"
|
||||
>
|
||||
<view class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 返回首页 -->
|
||||
<block wx:if="{{homeButton}}">
|
||||
<view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_home">
|
||||
<view
|
||||
bindtap="home"
|
||||
class="weui-navigation-bar__btn_home_wrapper"
|
||||
hover-class="weui-active"
|
||||
aria-role="button"
|
||||
aria-label="首页"
|
||||
>
|
||||
<view class="weui-navigation-bar__button weui-navigation-bar__btn_home"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<slot name="left"></slot>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 标题 -->
|
||||
<view class='weui-navigation-bar__center'>
|
||||
<view wx:if="{{loading}}" class="weui-navigation-bar__loading" aria-role="alert">
|
||||
<view
|
||||
class="weui-loading"
|
||||
aria-role="img"
|
||||
aria-label="加载中"
|
||||
></view>
|
||||
</view>
|
||||
<block wx:if="{{title}}">
|
||||
<text>{{title}}</text>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<slot name="center"></slot>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 右侧留空 -->
|
||||
<view class='weui-navigation-bar__right'>
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user