解决uniapp分段器参数改变不渲染,适用所有组件

简介: 解决uniapp分段器参数改变不渲染,适用所有组件

   在使用uniapp分段器 u-subsection时,组件只会在框架内的加载一次,后续想更改分段器内部的数据,无论如何都不会渲染出来,虽然data内数据变了,但是组件始终不会渲染上这些数据。

<view class="u-tabs-box padding_box">
        <u-subsection :list="equipmentCountList"
          active-color="#1B93F8"
          mode="subsection"
         :current="current"
         @change="sectionChange"></u-subsection>
</view>

这里我们改变equipmentCountList的值,始终不会渲染到页面上,vue有三种强制刷新的方法。


1. v-if(比较消耗性能)


2.给list加key,动态改变key


3.this.$forceUpdate


结果发现,this.$forceUpdate并不生效,使用v-if,v-else只能动态改变一次。u-subsection不支持加key的方式。最终通过给外层的DOM加一个标识,使用v-if,在改变标识后,延迟改变标识的方式成功解决。

<view class="u-tabs-box padding_box" v-if="update">
        <u-subsection :list="equipmentCountList"
          active-color="#1B93F8"
          mode="subsection"
         :current="current"
         @change="sectionChange"></u-subsection>
</view>

update默认为false

在我们请求接口前,把update设置为false,请求接口后设置为true,使组件强制重新加载

this.update = false;
//这个timeout相当于后台请求
setTimeout(
     ()=>{
     _this.equipmentCountList = [
      { name: '在线00000('+res.data.all+')' },
      { name: '在线('+res.data.online+')' },
      { name: '离线('+res.data.offline+')' }
     ]
    //请求结束后更改update的值
     setTimeout(()=>_this.update = true,0)
   },3000
 )

通过这种方法可以使uniapp组件强制重新加载。适用于那些不支持key,this.$forceUpdate不生效的组件。

目录
相关文章
|
1月前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
57 10
|
1月前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
88 5
|
1月前
|
数据可视化 大数据 API
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
82 2
|
1月前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
65 1
|
1月前
Uniapp矩阵评分组件
Uniapp矩阵评分组件
50 1
|
23天前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
36 0
|
1月前
|
编解码 数据可视化 API
DIY可视化UniApp表格组件
DIY可视化UniApp表格组件
37 0
|
1月前
|
机器学习/深度学习 算法 数据可视化
UniApp手机滑块验证组件代码生成器
UniApp手机滑块验证组件代码生成器
62 0
|
1月前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
91 0
|
4月前
|
移动开发 前端开发 小程序
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
117 4