feat: 搭建微信小程序展示端
- 初始化小程序工程配置与类型声明 - 增加首页、律所、律师列表、详情与历史页面 - 补充公共组件、运行时配置与示例素材
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
.action-dock {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 16rpx var(--spacing-lg) calc(16rpx + env(safe-area-inset-bottom));
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-top: 1rpx solid var(--border-color);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 100;
|
||||
box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6rpx;
|
||||
color: var(--text-secondary);
|
||||
font-size: 20rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
line-height: inherit;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
/* Emoji size */
|
||||
margin-bottom: 4rpx;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
.action-btn:active .icon {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 20rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
Component({
|
||||
methods: {
|
||||
handleAction(event: WechatMiniprogram.TouchEvent) {
|
||||
const action = event.currentTarget.dataset.action as string;
|
||||
this.triggerEvent('action', { action });
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
<view class="action-dock">
|
||||
<view class="action-item" data-action="save" bindtap="handleAction">
|
||||
<text class="icon">存</text>
|
||||
<text>收下名片</text>
|
||||
</view>
|
||||
<button class="action-item action-btn" open-type="share">
|
||||
<text class="icon">享</text>
|
||||
<text>分享名片</text>
|
||||
</button>
|
||||
<view class="action-item" data-action="location" bindtap="handleAction">
|
||||
<text class="icon">导</text>
|
||||
<text>律所导航</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
Component({
|
||||
properties: {
|
||||
title: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
back: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
value: '#F4F4F4',
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
value: '#1f1f1f',
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
<navigation-bar
|
||||
title="{{title}}"
|
||||
back="{{back}}"
|
||||
color="{{color}}"
|
||||
background="{{background}}"
|
||||
></navigation-bar>
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
.empty-wrap {
|
||||
padding: 140rpx 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 24rpx;
|
||||
background: var(--bg-surface);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36rpx;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
Component({
|
||||
properties: {
|
||||
text: {
|
||||
type: String,
|
||||
value: '暂无数据',
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,4 @@
|
||||
<view class="empty-wrap">
|
||||
<text class="empty-icon">∅</text>
|
||||
<text class="empty-text">{{text}}</text>
|
||||
</view>
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
.filter-wrap {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
padding: 0 24rpx 16rpx;
|
||||
background: var(--bg-page);
|
||||
/* Use variable */
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
height: 84rpx;
|
||||
padding: 0 18rpx;
|
||||
border-radius: 14rpx;
|
||||
border: 1rpx solid var(--border-color);
|
||||
/* Use variable */
|
||||
background: #fff;
|
||||
/* Card bg */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
picker {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 22rpx;
|
||||
color: var(--text-tertiary);
|
||||
/* Use variable */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 26rpx;
|
||||
color: var(--text-main);
|
||||
/* Use variable */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
color: var(--text-placeholder);
|
||||
/* Use variable */
|
||||
font-size: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
Component({
|
||||
properties: {
|
||||
officeOptions: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
areaOptions: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
selectedOffice: {
|
||||
type: String,
|
||||
value: '所有办公机构',
|
||||
},
|
||||
selectedArea: {
|
||||
type: String,
|
||||
value: '全部专业领域',
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleOfficeChange(event: WechatMiniprogram.CustomEvent<{ value: string }>) {
|
||||
const officeOptions = this.properties.officeOptions as string[];
|
||||
const index = Number(event.detail.value);
|
||||
const value = officeOptions[index] || officeOptions[0] || '所有办公机构';
|
||||
this.triggerEvent('officechange', { value, index });
|
||||
},
|
||||
handleAreaChange(event: WechatMiniprogram.CustomEvent<{ value: string }>) {
|
||||
const areaOptions = this.properties.areaOptions as string[];
|
||||
const index = Number(event.detail.value);
|
||||
const value = areaOptions[index] || areaOptions[0] || '全部专业领域';
|
||||
this.triggerEvent('areachange', { value, index });
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,16 @@
|
||||
<view class="filter-wrap">
|
||||
<picker mode="selector" range="{{officeOptions}}" bindchange="handleOfficeChange">
|
||||
<view class="filter-item">
|
||||
<text class="label">机构</text>
|
||||
<text class="value">{{selectedOffice}}</text>
|
||||
<text class="arrow">▾</text>
|
||||
</view>
|
||||
</picker>
|
||||
<picker mode="selector" range="{{areaOptions}}" bindchange="handleAreaChange">
|
||||
<view class="filter-item">
|
||||
<text class="label">领域</text>
|
||||
<text class="value">{{selectedArea}}</text>
|
||||
<text class="arrow">▾</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
.lawyer-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
.lawyer-card:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid var(--bg-page);
|
||||
flex-shrink: 0;
|
||||
margin-right: var(--spacing-sm);
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 22rpx;
|
||||
color: var(--primary-color);
|
||||
background: rgba(142, 34, 48, 0.08);
|
||||
/* Primary opacity */
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 8rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.office {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-tertiary);
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.tags-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 20rpx;
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-page);
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.tag-more {
|
||||
font-size: 20rpx;
|
||||
color: var(--text-tertiary);
|
||||
padding: 4rpx 0;
|
||||
}
|
||||
|
||||
.action-col {
|
||||
margin-left: var(--spacing-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.consult-btn {
|
||||
font-size: 24rpx;
|
||||
color: var(--primary-color);
|
||||
border: 1rpx solid var(--primary-color);
|
||||
padding: 6rpx 20rpx;
|
||||
border-radius: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
Component({
|
||||
data: {
|
||||
specialtiesText: '',
|
||||
},
|
||||
properties: {
|
||||
lawyer: {
|
||||
type: Object,
|
||||
value: null,
|
||||
},
|
||||
showOffice: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
},
|
||||
observers: {
|
||||
lawyer(lawyer: { specialties?: string[] } | null) {
|
||||
const specialties =
|
||||
lawyer && Array.isArray(lawyer.specialties) ? lawyer.specialties : [];
|
||||
this.setData({
|
||||
specialties, // Expose array for wx:for
|
||||
specialtiesText: specialties.join(' | '),
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleTap() {
|
||||
const lawyer = this.properties.lawyer as { id?: string } | null;
|
||||
this.triggerEvent('select', {
|
||||
id: lawyer && typeof lawyer.id === 'string' ? lawyer.id : '',
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,21 @@
|
||||
<view class="lawyer-card" bindtap="handleTap">
|
||||
<image class="avatar" src="{{lawyer.avatar}}" mode="aspectFill"></image>
|
||||
|
||||
<view class="content">
|
||||
<view class="header-row">
|
||||
<text class="name">{{lawyer.name}}</text>
|
||||
<text class="title">{{lawyer.title}}</text>
|
||||
</view>
|
||||
|
||||
<text wx:if="{{showOffice}}" class="office">{{lawyer.office}}</text>
|
||||
|
||||
<view class="tags-row">
|
||||
<text class="tag" wx:for="{{specialties}}" wx:key="*this" wx:if="{{index < 3}}">{{item}}</text>
|
||||
<text class="tag-more" wx:if="{{specialties.length > 3}}">...</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="action-col">
|
||||
<text class="consult-btn">咨询</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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 }, {})
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -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