uni-app华为快应用数据状态修改后页面状态未刷新

uni-app华为快应用数据状态修改后页面状态未刷新

示例代码：

// #ifdef QUICKAPP-WEBVIEW-HUAWEI
this.bannerList = [];
// #endif
this.$nextTick(() => {
    this.bannerList = firstPageData.brandHeadFocusDROList; // banner轮播列表
});

操作步骤：

  • 华为快应用请求接口返回数组list,页面未渲染

预期结果：

  • 页面跟随数据渲染

实际结果：

  • 页面未动态渲染

bug描述：

请求接口之后，页面返回数组列表list，状态更新，页面使用v-for渲染，界面未更新状态，this.$forceUpdate()不起作用；使用过this.$set也不得行，目前的唯一方式就是把list清空之后，使用this.$nextTick,页面会渲染出来，但是有两个问题，一、工作量巨大；二、页面会抖动；


更多关于uni-app华为快应用数据状态修改后页面状态未刷新的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

快应用同样碰到这个Bug。 <swiper class=“tab-box” ref=“swiper1” :autoplay=“false” :current=“tabIndex” :duration=“300”
@change=“onswiperchange” @transition=“onswiperscroll” @animationfinish=“animationfinish”>
<swiper-item v-for="(page, index) in tabList" :key="index">
<goodsList class=“page-item” :ref="‘page’ + index" @onGoodsClickCheckbox=“onGoodsClickCheckbox”>
</goodsList>
</swiper-item>
</swiper> 我发现不是页面没刷新，而是他数组更新之后刷新的还是第一个页面。看到有一个解决方案是通过在v-for之前加上v-if 判断数据是否存在来渲染。但跟我当前结构并不符合。我是在goodlist组件中执行加载数据方法。

更多关于uni-app华为快应用数据状态修改后页面状态未刷新的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在华为快应用中，数据更新后页面未刷新的问题通常是由于快应用平台的渲染机制与标准Vue存在差异导致的。以下是针对您问题的具体分析和解决方案：

问题分析

华为快应用平台对Vue响应式系统的支持不完全，特别是在数组更新时，直接赋值可能无法触发视图更新。您遇到的this.$forceUpdate()和this.$set无效正是这个原因。

解决方案

方案1：使用数组方法（推荐）

// 清空数组
this.bannerList.splice(0, this.bannerList.length);

// 添加新数据
firstPageData.brandHeadFocusDROList.forEach(item => {
    this.bannerList.push(item);
});

方案2：重新赋值整个数组

// 创建新数组引用
this.bannerList = [...firstPageData.brandHeadFocusDROList];

方案3：使用Vue.set（针对数组索引更新）

// 如果需要更新特定索引
this.$set(this.bannerList, index, newValue);

方案4：条件编译优化

// #ifdef QUICKAPP-WEBVIEW-HUAWEI
// 华为快应用专用处理
this.bannerList = JSON.parse(JSON.stringify(firstPageData.brandHeadFocusDROList));
// #endif

// #ifndef QUICKAPP-WEBVIEW-HUAWEI
// 其他平台正常处理
this.bannerList = firstPageData.brandHeadFocusDROList;
// #endif
回到顶部