今天在用wepy搞小程序的时候遇到了一个小坑,卡了我好一会,因为之前在做React,所以对wepy的了解不是特别深入,所以导致了这个问题的发生

先贴上来关键代码让大家看一看(备注之处是问题解决的方法)

效果:

我们可以看到刚进来时整个页面都没数据,但我点别的选项之后数据又会出来

why?当时我真的是满脸懵逼啊,数据也获取到了就是第一次不渲染,给我急得差点把自己的头发都薅干净了

经过我一番调试,发现他奶奶的checkStep里面的赋值附近有问题,当时我脑子一热把赋值改成了用setData()结果一点效果没有,用this.itemchecked赋值还是第一次不出来,

在我即将把头发薅干净之际,我的大腿过来帮我看了一眼,轻飘飘的来了句你缺了this.$apply(),我日,我赶紧试了试,还真是

!!!!!一切正常

那为啥需要调用this.$apply()呢,

可以看到methods里面的方法被bindtap调用之后触发了页面渲染,而当我在onLoad()里面调用时却没有触发页面渲染

经过我一番搜索和查证得到以下结果:

使用wepy框架写小程序,data赋值这里不需要使用this.setData({}),例如:data:{x:''1"},

比如data里面你定义了一个x='',然后你在自定义的方法里面用this.x=200 之后,需要用this.$apply()来进行数据绑定。这样你在view中绑定data中的x变量时,才会有200,不然就是空

(特别注意:)

不过有个前提,method里面的方法是不用这个的,但methods里面只能放bindtap这类方法,所以你自己定义的其他方法,或者写在onshow里面,就必须得用this.$apply()。

this.$apply()使用场景:

  1.异步更新数据

  2.手动刷新DOM

哈哈哈,有一个小坑被我踩过了,美滋滋!

记一次wepy里面的渲染问题(this.$apply()的使用)的更多相关文章

  1. 小程序和wepy做循环渲染如何点击拿到相对应的值

    数据和其他的就忽略,简单上手,wepy的for渲染方式改成对应的就行,传参触发不用改 <view wx:for="{{list}}"> {{item.title}} & ...

  2. Salesforce随笔: 将Visualforce Page渲染为PDF文件(Render a Visualforce Page as a PDF File)

    参照 : Visualforce Developer Guide 第60页 <Render a Visualforce Page as a PDF File> 你可以用PDF渲染服务生成一 ...

  3. Wepy-小程序踩坑记

    引言 用过原生开发的小程序也知道除了api 其他功能性的内容并不多对于需要做大型项目来说是比较难入手的,因此朋友推荐的wepy我就入坑鸟...这么一个跟vue的开发方式类似的框架,不过说起来跟vue类 ...

  4. 前端工程之模块化(来自百度FEX)

    模块化 是一种处理复杂系统分解成为更好的可管理模块的方式,它可以把系统代码划分为一系列职责单一,高度解耦且可替换的模块,系统中某一部分的变化将如何影响其它部分就会变得显而易见,系统的可维护性更加简单易 ...

  5. angularjs -- 路由监听

    前几天,项目在做一个功能时需要在页面切换之前关闭正在执行的函数.尝试了几种方式都不行,最后想到既然angularjs是通过理由切换页面,那就在路由上面做文章吧.AngularJS在路由发生改变时,可以 ...

  6. mvvm的初步思想

    1.Object.defineProperty(obj,key,desc); 用法:1.给对象新增属性和特性 2.修改对象属性值和特性 desc(属性特性): 1.enumerable:boolean ...

  7. angularjs脏检查

    angularjs实现了双向绑定,与vue的defineProperty不同,它的原理在于它的脏检查机制,以下做了一些总结: angular.js介绍 AngularJs是mvvm框架,它的组件是vm ...

  8. 使用wepy框架搭建微信小程序采坑记(一)

    1.什么是wepy 这个框架是腾讯内部出的一个类MVVM的小程序开发框架.大体上来说语法是类VUE的,所以如果有VUE开发经验的话迁移成本会低一些.至于具体的怎么使用我就不赘言了,有问题查文档(官方文 ...

  9. 为什么wepy的数据无法渲染到实例里面去

    为啥明明WEPY是将数据渲染到视图还会出这个问题呢? 因为只是类似于 Vue 框架,所以不能完全实现数据渲染,尤其当异步操作的时候. (1)WePy 普通数据绑定. WePY使用脏数据检查对setDa ...

随机推荐

  1. 项目Alpha冲刺(团队1/10)

    项目Alpha冲刺(团队1/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...

  2. flask_SQLALchemy之多表查询

    1. join 查询 假设这样一个业务场景,知道一个邮箱地址,要查询这个地址所属的用户,第一个办法是用连接多个 filter() 来查询. for u, a in session.query(User ...

  3. 4.html基础标签:表单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 教你用python打造WiFiddos

    本文来源于i春秋学院,未经允许严禁转载. 0x00 前言因为在百度上很难找到有关于用python打造WiFidos的工具的,而且不希望大家成为一名脚本小子,所以我打算写一篇,需要的工具有scapy,i ...

  5. [CocoaPods]常见问题

    “现在Swift有一个内置的包管理器,CocoaPods会停止开发吗?” Swift Package Manager(SPM)处于“早期设计和开发”阶段[1].它目前不支持iOS,观看操作系统或Obj ...

  6. Apache重写规则

    1..htaccess文件使用前提 .htaccess的主要作用就是实现url改写,也就是当浏览器通过url访问到服务器某个文件夹时,作为主人,我们可以来接待这个url,具体 地怎样接待它,就是此文件 ...

  7. 【Spark调优】Shuffle原理理解与参数调优

    [生产实践经验] 生产实践中的切身体会是:影响Spark性能的大BOSS就是shuffle,抓住并解决shuffle这个主要原因,事半功倍. [Shuffle原理学习笔记] 1.未经优化的HashSh ...

  8. docker配置仓储库时出错:无法安全地用该源进行更新,所以默认禁用该源

    在Ubuntu上安装docker,配置仓储库时第一次使用了阿里去的镜像,如下 sudo add-apt-repository "deb [arch=amd64] http://mirrors ...

  9. Liferay7 BPM门户开发之21: 理解消息总线(Message Bus)体系

    Liferay Message Bus提供了松耦合的消息发送接收机制(生产和消费的设计模式),用于本地服务,不支持远程服务,支持集群. 主要用途: 两个或多个插件之间的通讯. 在事件中发送搜索索引,比 ...

  10. request和response简介

    Tomcat收到客户端的http请求,会针对每一次请求,分别创建一个代表请求的request对象.和代表响应的response对象. 既然request对象代表http请求,那么我们获取浏览器提交过来 ...