【小程序】微信小程序slice方法分割无效，单独输出一直为空，这是为什么呢

🌹欢迎来到《小5讲堂》🌹

🌹这是《小程序》系列文章，每篇文章将以博主理解的角度展开讲解。🌹

🌹温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！🌹
👨💻 作者简介

🏆 荣誉头衔：2024博客之星Top14 | CSDN博客专家 | 阿里云专家博主

🎤 经历 ：曾多次进行线下演讲，亦是 CSDN内容合伙人 以及 新星优秀导师

💡 信念 ："帮助别人，成长自己！"

🚀 技术领域：深耕全栈，精通 .NET Core (C#)、Python、Java，熟悉主流数据库

🤝 欢迎交流：无论是基础概念还是进阶实战，都欢迎与我探讨！

前言
核心原因
问题复现
为什么？
- [1. 初次渲染](#1. 初次渲染)
- [2. 2秒后数据更新](#2. 2秒后数据更新)
真正原因
- [🔴 情况A：progressList 初始不是数组](#🔴 情况A：progressList 初始不是数组)
- [🔴 情况B：setData 没触发重新渲染](#🔴 情况B：setData 没触发重新渲染)
- [🔴 情况C：wx:key 不匹配导致节点未被更新](#🔴 情况C：wx:key 不匹配导致节点未被更新)
解决方案
- [✅ 方案1：加 wx:if 确保有数据再 slice（最常用）](#✅ 方案1：加 wx:if 确保有数据再 slice（最常用）)
- [✅ 方案2：JS 里提前截取（最稳妥）](#✅ 方案2：JS 里提前截取（最稳妥）)
- [✅ 方案3：使用 computed 属性（wxs 或 behaviors）](#✅ 方案3：使用 computed 属性（wxs 或 behaviors）)
推荐文章

前言

对于数组的分割再熟悉不过了，都会内置方法，比如：slice。

当博主信心满满的写好逻辑后，发现一直显示空白，单独输出调试确实也是空白，

因此，写篇文章简单总结下其中的原因。

核心原因

即便 progressList 后续赋值为有数据的数组对象，WXML 里的 slice(0, 2) 在初次渲染时已经执行过一次（结果为 []），后续数据变化时不会自动重新计算切割逻辑。

问题复现

js 复制代码

Page({
  data: {
    progressList: []  // 初始空数组
  },
  onLoad() {
    // 2秒后赋值数组对象
    setTimeout(() => {
      this.setData({
        progressList: [
          { id: 1, name: '任务1' },
          { id: 2, name: '任务2' },
          { id: 3, name: '任务3' }
        ]
      })
    }, 2000)
  }
})

html 复制代码

<view wx:for="{{progressList.slice(0, 2)}}" wx:key="id">
  {{item.name}}
</view>

结果：一直为空

为什么？

1. 初次渲染

progressList = []
[].slice(0, 2) = []
wx:for 遍历空数组 → 不生成任何节点

2. 2秒后数据更新

this.setData({ progressList: [...] })
页面重新渲染
但 WXML 表达式 progressList.slice(0, 2) 重新计算了 吗？
✅ 会重新计算！
❌ 但结果还是 []？
等等------这里其实会正常显示，除非......

真正原因

真正导致"一直为空"的隐藏原因

🔴 情况A：progressList 初始不是数组

js 复制代码

data: {
  progressList: null  // 或 undefined
}

null.slice(0, 2) → 报错，小程序会忽略这个报错并显示空白

🔴 情况B：setData 没触发重新渲染

如果数据是父组件传递的，且引用没变：

js 复制代码

// 错误写法
const list = this.data.progressList
list.push({ id: 4, name: '任务4' })
this.setData({
  progressList: list  // 引用没变，可能不触发重新渲染
})

🔴 情况C：wx:key 不匹配导致节点未被更新

html 复制代码

<view wx:for="{{progressList.slice(0, 2)}}" wx:key="index">
  <!-- 用 index 当 key 有时会出问题 -->
</view>

解决方案

✅ 方案1：加 wx:if 确保有数据再 slice（最常用）

html 复制代码

<view wx:if="{{progressList && progressList.length}}">
  <view wx:for="{{progressList.slice(0, 2)}}" wx:key="id">
    {{item.name}}
  </view>
</view>
<view wx:else>暂无数据</view>

✅ 方案2：JS 里提前截取（最稳妥）

博主这里采用的是这个方案。

js 复制代码

data: {
  topTwoList: []  // 专门存前两条
},
onLoad() {
  setTimeout(() => {
    const list = [
      { id: 1, name: '任务1' },
      { id: 2, name: '任务2' },
      { id: 3, name: '任务3' }
    ]
    this.setData({
      progressList: list,
      topTwoList: list.slice(0, 2)  // 提前截好
    })
  }, 2000)
}

html 复制代码

<view wx:for="{{topTwoList}}" wx:key="id">
  {{item.name}}
</view>

✅ 方案3：使用 computed 属性（wxs 或 behaviors）

js 复制代码

// 借助 wxs 实时计算
<wxs module="helper">
  function topTwo(arr) {
    return arr && arr.slice ? arr.slice(0, 2) : []
  }
  module.exports = { topTwo }
</wxs>

<view wx:for="{{helper.topTwo(progressList)}}" wx:key="id">
  {{item.name}}
</view>

【小程序】微信小程序slice方法分割无效，单独输出一直为空，这是为什么呢

目录

前言

核心原因

问题复现

为什么？

1. 初次渲染

2. 2秒后数据更新

真正原因

🔴 情况A：progressList 初始不是数组

🔴 情况B：setData 没触发重新渲染

🔴 情况C：wx:key 不匹配导致节点未被更新

解决方案

✅ 方案1：加 wx:if 确保有数据再 slice（最常用）

✅ 方案2：JS 里提前截取（最稳妥）

✅ 方案3：使用 computed 属性（wxs 或 behaviors）

推荐文章