记一次wepy里面的渲染问题(this.$apply()的使用)
今天在用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()的使用)的更多相关文章
- 小程序和wepy做循环渲染如何点击拿到相对应的值
数据和其他的就忽略,简单上手,wepy的for渲染方式改成对应的就行,传参触发不用改 <view wx:for="{{list}}"> {{item.title}} & ...
- 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渲染服务生成一 ...
- Wepy-小程序踩坑记
引言 用过原生开发的小程序也知道除了api 其他功能性的内容并不多对于需要做大型项目来说是比较难入手的,因此朋友推荐的wepy我就入坑鸟...这么一个跟vue的开发方式类似的框架,不过说起来跟vue类 ...
- 前端工程之模块化(来自百度FEX)
模块化 是一种处理复杂系统分解成为更好的可管理模块的方式,它可以把系统代码划分为一系列职责单一,高度解耦且可替换的模块,系统中某一部分的变化将如何影响其它部分就会变得显而易见,系统的可维护性更加简单易 ...
- angularjs -- 路由监听
前几天,项目在做一个功能时需要在页面切换之前关闭正在执行的函数.尝试了几种方式都不行,最后想到既然angularjs是通过理由切换页面,那就在路由上面做文章吧.AngularJS在路由发生改变时,可以 ...
- mvvm的初步思想
1.Object.defineProperty(obj,key,desc); 用法:1.给对象新增属性和特性 2.修改对象属性值和特性 desc(属性特性): 1.enumerable:boolean ...
- angularjs脏检查
angularjs实现了双向绑定,与vue的defineProperty不同,它的原理在于它的脏检查机制,以下做了一些总结: angular.js介绍 AngularJs是mvvm框架,它的组件是vm ...
- 使用wepy框架搭建微信小程序采坑记(一)
1.什么是wepy 这个框架是腾讯内部出的一个类MVVM的小程序开发框架.大体上来说语法是类VUE的,所以如果有VUE开发经验的话迁移成本会低一些.至于具体的怎么使用我就不赘言了,有问题查文档(官方文 ...
- 为什么wepy的数据无法渲染到实例里面去
为啥明明WEPY是将数据渲染到视图还会出这个问题呢? 因为只是类似于 Vue 框架,所以不能完全实现数据渲染,尤其当异步操作的时候. (1)WePy 普通数据绑定. WePY使用脏数据检查对setDa ...
随机推荐
- 【手记】解决VS发布asp.net项目报错“该项目中不存在目标GatherAllFilesToPublish”及后续问题
办法在最后. 用VS2017打开一个以前用VS2010写的asp.net项目后,设置好发布选项(发布到文件夹),发布的时候报错如图: 搜索一番,找到的办法是: 在项目文件(xxx.csproj)中,在 ...
- Tomcat 部署 Web 项目的本质理解
手动创建Web项目 不借助集成开发工具IDE,直接手动创建一个Web项目,有助于理解Web项目的本质. 1.首先建立一个myweb文件夹(自己定义项目名). 2.然后可以建一个html文件(文件里面只 ...
- 三种方法在当前目录下打开cmd命令窗口
概述 运行npm的时候,每次都要cd到目录,很麻烦,所以总结了三种在当前目录下直接打开cmd窗口的方法,供以后开发时参考,相信对其他人也有用. 方法一 在当前目录按住shift再右键. 会看到右键菜单 ...
- php函数式编程
// 函数式编程 $users = array( array('id' => 1, 'name' => 'abc1', 'age' => 29, '性别' => '男'), a ...
- 使用ES6的Promise完美解决回调地狱
相信经常使用ajax的前端小伙伴,都会遇到这样的困境:一个接口的参数会需要使用另一个接口获取. 年轻的前端可能会用同步去解决(笑~),因为我也这么干过,但是极度影响性能和用户体验. 正常的前端会把接口 ...
- Python网络编程-IO阻塞与非阻塞及多路复用
前言 问题:普通套接字实现的服务端的缺陷 一次只能服务一个客户端! accept阻塞! 在没有新的套接字来之前,不能处理已经建立连接的套接字的请求 re ...
- Python之unittest测试代码
前言 编写函数或者类时,还可以为其编写测试.通过测试,可确定代码面对各种输入都能够按要求的那样工作. 本次我将介绍如何使用Python模块unittest中的工具来测试代码. 测试函数 首先我们先编写 ...
- Spring Cloud的注册中心和服务者,消费者的构建
Spring Cloud的注册中心和服务者,消费者的构建 注册中心Eureka: 新建项目stu-eureka: StuEurekaApplication: package com.demo.stue ...
- eclipse导入Tomcat8源码
最近这段时间在学习how tomcat works这本书,需要结合书上的例子对照tomcat源码来看,需要导入tomcat的源码,所以在网上找了很多教程,结合自己遇到的问题,记录如下: 1.前期准备 ...
- Spring Cloud Hystrix——熔断器
1.雪崩效应在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩效应是一种因“服务提供者”的不可用导致“服务消费者 ...