- app.js 通过 wx.getSystemInfoSync 获取 statusBarHeight 存入 globalData
- 所有12个自定义导航页面的 JS 读取 statusBarHeight
- WXML 通过 style="padding-top: {{statusBarHeight + 24}}px" 动态适配
- 普通手机和灵动岛手机都能正确显示
31 行
1.2 KiB
Plaintext
31 行
1.2 KiB
Plaintext
<view class="page">
|
|
<view class="page-header page-header-pink" style="padding-top: {{statusBarHeight + 24}}px;">
|
|
<view class="page-header-title">蓝牙连接</view>
|
|
<view class="page-header-subtitle">{{state === 'scanning' ? '正在搜索设备...' : state === 'connecting' ? '正在连接设备...' : state === 'binding' ? '正在绑定...' : '连接失败'}}</view>
|
|
</view>
|
|
|
|
<view class="page-content">
|
|
<view class="info-tip">
|
|
<text>📡</text>
|
|
<text>请确保手机蓝牙已开启</text>
|
|
</view>
|
|
|
|
<view class="search-card" wx:if="{{state === 'scanning' || state === 'connecting'}}">
|
|
<view class="search-icon pulsing">⏳</view>
|
|
<view class="search-text">搜索中...</view>
|
|
</view>
|
|
|
|
<view class="found-card" wx:if="{{state === 'binding'}}">
|
|
<view class="found-icon">💆</view>
|
|
<view class="found-name">光子美容仪-{{deviceId}}</view>
|
|
<text class="status-badge status-badge-green">点击连接</text>
|
|
</view>
|
|
|
|
<view class="found-card" wx:if="{{state === 'error'}}">
|
|
<view class="search-icon">⚠️</view>
|
|
<view class="found-name">{{error || '连接失败'}}</view>
|
|
<button class="retry-btn" bindtap="onRetry">重试</button>
|
|
</view>
|
|
</view>
|
|
</view>
|