今天在用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. kaldi的TIMIT实例一

    TIMIT语音库是IT和MIT合作音素级别标注的语音库,用于自动语音识别系统的发展和评估,包括来自美式英语,8个地区方言,630个人. 每个人读10个句子,每个发音都是音素级别.词级别文本标注,16k ...

  2. [转]kaldi中的特征提取

    转:http://blog.csdn.net/wbgxx333/article/details/25778483 本翻译原文http://kaldi.sourceforge.net/feat.html ...

  3. 分布式系统中 Unique ID 的生成方法

    http://darktea.github.io/notes/2013/12/08/Unique-ID Snowflake 生成的 unique ID 的组成 (由高位到低位): 41 bits: T ...

  4. Windows 系统里面的 hosts 文件

    一.什么是hosts文件? hosts文件是一个用于储存计算机网络中各节点信息的计算机文件.这个文件负责将主机名映射到相应的IP地址.hosts文件通常用于补充或取代网络中DNS的功能.和DNS不同的 ...

  5. ubuntu root默认密码(初始密码)

    ubuntu安装好后,root初始密码(默认密码)不知道,需要设置. 1.先用安装时候的用户登录进入系统 2.输入:sudo passwd  按回车 3.输入新密码,重复输入密码,最后提示passwd ...

  6. Java高级开发必会的50个性能优化细节

    在JAVA程序中,性能问题的大部分原因并不在于JAVA语言,而是程序本身.养成良好的编码习惯非常重要,能够显著地提升程序性能. 1. 尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时 ...

  7. C# DataGridview控件自动下拉到最后一行

    有时候使用DataGridView难免会在最后插入一条数据,如果插入的数据超过滚动条显示的行数,那么默认情况下不会显示到最后一行.增加以下代码一直将滚动条拉倒最低. ;

  8. oracle无法启动asm实例记录

    首先查看asm进程ps aux|grep asmasm进程没起进行下面操作su - gridsrvctl start asmexit查看ora进程ps aux|grep oraora进程没起进行下面操 ...

  9. oc中的oop基础及类的基本介绍

    面向对象的(OOP)的基础知识 类(class):表示一组对象数据的结构体,对象通类来得到自身.类名首字母大写. 对象(objcet):是一种包含值和指向其类的隐藏指针的结构体.运行中的程序中通常会有 ...

  10. RecyclerView的简单使用

    使用 RecyclerView 要做下面这些操作, 1.在build.gradle添加 RecyclerView的依赖,因为RecyclerView不是内置在android系统中的,请注意版本要一致 ...