微信原生小程序中，以下 列表显示，最后一条数据被部分遮挡: <view class="page-c...

在小程序中，如果使用了自定义底部导航(例如 van-tabbar)，常见的「最后一条数据被遮挡」问题通常和页面布局或滚动容器没有预留足够底部空间有关。下面给出几种常用的解决思路，任选其一或结合使用即可避免列表内容被底部栏覆盖。

方法一：给页面内容区增加足够的底部间距

在你的代码里，最外层容器是：

html
<view class="page-container data-v-3dcbeed4">
  <view style="margin-bottom: 550rpx;">
    <!-- 订单列表 -->
  </view>
  <!-- 底部 自定义导航栏 -->
  <van-tabbar ...>
    ...
  </van-tabbar>
</view>

1. 去掉或缩小内层 view 上那种过大的 margin-bottom 值，比如把 550rpx 调小到合适的值（如 200rpx 左右），然后观察下效果；

2. 如果你想保持较大的底部区域，但又不想让它“太空”，可以改用 padding-bottom 为页面本身留出空间。例如：

   css
   /* page-container.wxss */
   .page-container {
     /* 可以根据实际 UI 需要调整大小 */
     padding-bottom: 200rpx;
   }

   这样一来，页面的可滚动内容区在底部会留出额外的 200rpx 空间，避免被 tabbar 遮住。

方法二：使用 scroll-view 并固定 tabbar

如果希望列表可以在固定底部导航栏之下滚动显示，可以：

1. 将订单列表区域放到 scroll-view 容器里，并设置合适的 height 或 flex: 1; overflow: auto;
2. 将 van-tabbar 设为固定定位（或者直接用它的自带 safe-area-inset-bottom 即可），确保它始终在屏幕底部。

示例（示意写法）：

html
<view class="page-container">
  <scroll-view scroll-y style="height: calc(100vh - 100rpx);">
    <!-- 可以视情况用 flex: 1; 处理 -->
    <!-- 订单列表内容 -->
  </scroll-view>

  <van-tabbar
    safe-area-inset-bottom
    active="{{ activeIndex }}"
    bind:change="tab_onChange"
    ...
  >
    ...
  </van-tabbar>
</view>

• calc(100vh - 100rpx) 或者一个你觉得合适的高度，保证 scroll-view 高度减去底部导航的高度即可。
• 若使用 safe-area-inset-bottom，是为了适配 iPhone X 等带有底部安全区域的机型，对普通机型同样也会适配到最底部。
• 如果你只是在普通机型上测试，为了简单，也可以直接在 van-tabbar 上写固定定位，或通过其自带的样式让它“悬浮”在底部。

方法三：给要“盖住”内容的组件设置更高的层级或加安全区

有时遮挡问题也和 z-index 层级冲突、或缺少安全区域适配有关。
但是你这里使用了 safe-area-inset-bottom 属性，说明 Vant 组件本身就会帮你在底部留出安全区给 iPhone X 这一类机型。若依旧被遮挡，多数情况还是**本身容器滚动区域的“底部高度不够”**的问题。

小结

• 最简单的方式：直接在页面主体或者列表容器上留足底部间距（padding-bottom 或者改成 scroll-view 方式）。
• 如果你用的是自定义 TabBar 并手动 position: fixed; 到页面底部，也需要给页面下方内容留出空白，否则列表的最后一条就会被覆盖。
• Vant 的 safe-area-inset-bottom 仅能保证适配有下巴区域的手机（如 iPhone X 系列），它并不会自动给“滚动内容”做额外的可视预留空间，所以还需要你在页面或滚动容器中手动留位。

这样调整后，一般就不会再出现最后一条订单被底部导航挡住的情况了。

根据错误信息提示 unexpected character '�'，这是因为 WXML 编译器识别到了非法或不兼容的字符。
从你贴出来的代码里，可以看到在 wx:if 上使用了 “中文/弯引号” 而不是标准的英文双引号。例如：

html
<van-tag type="primary" wx:if=“{{item.hgzrz==1}}”>护工证</van-tag>
<van-tag type="success" wx:if=“{{item.jkzrz==1}}”>体检报告</van-tag>
<van-tag type="warning"  wx:if=“{{item.ok==1}}”>背景调查</van-tag>

这里的 “ ” 看上去像双引号，但其实是带方向的「弯引号」，会导致编译报错。

解决办法

1. 将不正确的引号替换为标准英文双引号 "，或者直接使用单引号 ' 也行。
2. 保证文件整体编码（如 UTF-8）正常，且避免从一些文档软件（如 Word）直接粘贴带来的格式问题。

修正后的示例如下：

html
<van-cell center wx:for="{{list}}" wx:key="index">
  <view slot="icon">
    <image src="{{item.xt}}" class="hugongtouxiang" />
  </view>
  <view slot="title">
    <view class="name">{{item.names}}</view>
    <view class="zizhi">
      <text>资料认证:</text>
      <!-- 将 “ 更换为 " -->
      <van-tag type="primary" wx:if="{{item.hgzrz == 1}}">护工证</van-tag>
      <van-tag type="success" wx:if="{{item.jkzrz == 1}}">体检报告</van-tag>
      <van-tag type="warning" wx:if="{{item.ok == 1}}">背景调查</van-tag>
    </view>
    <view class="miaoshu">{{item.grjj}}</view>
  </view>
</van-cell>

注意 wx:if="{{item.hgzrz==1}}" 中的 ==1 也要写在合法表达式内。

修复引号后再编译，就不会再出现 unexpected character 错误了。

从你的返回结果可以看出，grjj 字段的值实际是**被重复编码（双重编码）**了。

• 第一次正常 UrlEncode 后，会形如 %E6%8A%A4%E7%90%86... 这类字符串；
• 现在却出现了 %25E6%258A%25A4...，说明 “%” 自身也被再次编码成了 “%25”。

因此，在小程序里如果仅用一次 decodeURIComponent，解出来的依然还带有 “%” 的剩余编码（即第一次编码的结果）。要想得到真正的中文，需要解码两次。

两种常见解决方案

1. 在小程序端做两次解码

当你拿到 res.data 后，对其中被双重编码的字段（grjj）执行两次 decodeURIComponent：

js
// 假设 res.data 是这样的结构： [{ grjj: "%25E6%258A..." }, ...]

res.data.forEach((item) => {
  // 第一次解码
  let tmp = decodeURIComponent(item.grjj); 
  // 第二次解码，得到真正的中文
  item.grjj = decodeURIComponent(tmp);
});

that.setData({
  list: res.data
});

这样就能把 %25E6%258A... 还原为真正的中文字符串（例如“护理经验2年，用心服务...”）。

2. 改后端避免双重编码

如果你在 C# 后端使用了 HttpUtility.UrlEncode，但某些环节又多 encode 了一次，才导致出现 %25。可以追踪下：

• 是不是写入数据库前又做了一次 UrlEncode？
• 或者是返回 JSON 前再 encode？

把多余的那次编码去掉，只让 grjj 在后端经过一次正确的 UrlEncode，这样前端只需要一次 decodeURIComponent 即可。

小结

• 当前最直接的做法是在前端解码两次，如上所示。
• 最根本的做法是后端只做一次编码，前端对应只 decode 一次就行。

只要让后端或前端处理逻辑保持一致，就可以正确显示中文而不会出现 %25 之类的多余符号。

在微信小程序中，如果要“关闭所有页面”并跳转到一个 tabBar 页面，官方推荐且唯一有效的方法是使用 wx.switchTab。

• wx.reLaunch / wx.redirectTo 等方法不支持直接跳转到 tabBar 页面；
• wx.switchTab 会关闭当前所有非 tabBar 页面，并切换到指定的 tabBar 页面。

下面是一个示例（假设 /pages/home/home 是配置在 app.json 里的 tabBar 页面）：

js
wx.switchTab({
  url: '/pages/home/home'
})

这样就能达到「关闭所有当前打开的普通页面，并切换到指定 tabBar 页面」的效果。

在小程序中，只有官方 TabBar（在 app.json 里配置 "tabBar"）才能使用 wx.switchTab 来实现「关闭非 tabBar 页面并跳转」。
但如果你使用的是自定义 tabBar（比如自己写了底部导航组件，或用了第三方组件库的 van-tabbar 等），那么就无法用 wx.switchTab 达到同样效果。

自定义 TabBar 场景下的「关闭所有页面并跳转」方法

核心思路：用 wx.reLaunch 来关闭所有历史页面，并打开指定页面（该页面内有你自定义的 tabBar 逻辑）。

js
wx.reLaunch({
  url: '/pages/yourCustomTabbarPage/yourCustomTabbarPage'
})

这样做会销毁当前所有页面栈，并重新打开 /pages/yourCustomTabbarPage/yourCustomTabbarPage 这个页面。
然后，你可以在这个页面里（或它的父级组件）加载并显示自定义的 TabBar 组件，实现类似官方 tabBar 的效果。

具体步骤

1. 在 app.json 中并未声明官方 tabBar，你所有页面都是普通页面，或自行封装“底部导航”组件。

2. 在某个页面（比如 yourCustomTabbarPage）里引用/使用你的自定义 tabBar 组件，并根据路由或数据来设置它的当前激活项。

3. 当你需要“关闭所有页面，切到自定义 tabBar 页面”时，直接：

   js
   // 关闭所有页面，并重新打开目标页面
   wx.reLaunch({
     url: '/pages/yourCustomTabbarPage/yourCustomTabbarPage'
   })

   小程序会销毁当前所有历史页面栈，只留下一个新的页面实例，此时该页面内的自定义 tabBar 自然会被渲染出来。

注意事项

• wx.switchTab 只适用于官方 tabBar：它会强制跳转到配置在 app.json 中的 tabBar 页面，并隐式地关闭栈中其他非 tabBar 页面。自定义 tabBar 无法使用此方法。
• wx.redirectTo 与 wx.navigateTo：都会保留历史页面栈（或保留一部分），无法真正做到“关闭所有页面”。要想彻底清空，就需要 wx.reLaunch。
• 状态管理：如果你的自定义 tabBar 需要记录是哪一项被激活，需要在跳转时、或在页面 onLoad 时，传递一些标识参数，然后在页面里或组件里手动设置激活的 tab 索引。

总结

• 自定义 tabBar 场景下，想要“关闭所有页面并切到某个页面”最简单的方法就是 wx.reLaunch。
• 在新的页面中加载并渲染自定义 tabBar（或你的底部导航组件），并将其切换到对应的选中态。

当你使用 wx.reLaunch 跳转到自定义 tabBar 页面时，结果是「空白页面」，通常是因为下面几个常见原因导致页面并未正确渲染。

1. 检查跳转路径是否正确

1. 确保 app.json 中 pages 数组里有该页面路径。如果你写的是 /pages/yourCustomTabbarPage/yourCustomTabbarPage，就需要在 app.json 里相同路径进行声明：

   json
   {
     "pages": [
       "pages/yourCustomTabbarPage/yourCustomTabbarPage",
       ...
     ]
   }

2. 确认大小写、文件夹路径是否一致。小程序对路径大小写很敏感，如果文件夹或文件名大小写和引用不一致，会导致找不到页面。
3. 避免写错前缀或多写 /。可以尝试去掉第一个斜杠，改成：

   js
   wx.reLaunch({
     url: 'pages/yourCustomTabbarPage/yourCustomTabbarPage'
   })

   或者保持 /pages/... 与 app.json 一致。最简单的办法是直接复制 app.json 里声明的路径放到 url: 后面，确保完全相同。

2. 确认页面自身代码是否错误或渲染报错

即使路径正确，如果页面内部代码出错（例如 WXML 语法错误、JS 报错），也可能会导致空白页。可以在开发者工具的调试控制台查看是否有报错。

常见问题：

• 不小心使用了「中文引号」或不正确的标签，编译通过不了。
• 自定义组件未在 usingComponents 中正确引用。
• 某些数据或接口报错，导致 this.setData 出错。
• 样式问题，页面内容被隐藏或覆盖。

排查建议：

1. 打开开发者工具 > 看 “调试控制台”，检查是否有运行时错误信息、或者 WXML 编译异常。
2. 在该页面的 onLoad、onShow 加上 console.log，看页面是否实际执行了这些生命周期函数。

3. 检查你的「自定义 tabBar」组件引入和渲染逻辑

如果你的页面本身只是一个空壳，主要内容都在自定义 tabBar 组件里，那么需要确保：

1. 你已经在页面 json 或 usingComponents 里正确引入了该自定义 tabBar 组件；
2. WXML 中是否写了类似 <custom-tab-bar />（示例）来渲染自定义导航栏；
3. 组件内是否有实际的内容、样式，以及相应的逻辑是否正常运行。

当 wx.reLaunch 进入该页面后，页面必须能正常显示出自定义 tabBar，否则就会看到空白。

4. 如果仅想看到自定义导航栏，可以在同页面调试

若你只想验证自定义 tabBar 是否正常，可以先在当前页面直接展示组件，无需 wx.reLaunch。这样能更快排查「组件本身」是否能正常渲染。如果能正常渲染，再来测试跳转逻辑。

小结

1. 优先确认 url 是否与 app.json 完全匹配；
2. 排查页面 WXML、JS 及引用组件是否有报错；
3. 确认自定义 tabBar 组件在该页面内被正确引入并渲染；
4. 在开发者工具内查看调试控制台的错误提示，必要时添加 console.log，以确保页面生命周期函数被调用。

解决好以上问题后，wx.reLaunch 通常就能够正确打开并渲染你的自定义 tabBar 页面了。