微信小程序Page中data数据操作和函数调用方法


Posted in Javascript onMay 08, 2019

Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

//index.js
Page({
 data: {
  text: "This is page data.",
  sliderOffset: 0,
  sliderLeft: 0,
  state:{
     genre:[],
     genre_index: 0,
     model:[],
     model_index: 0,
     terminalStatus:'',
  }
 },
 onLoad: function(options) {
  // Do some initialize when page load.
 },
 onReady: function() {
  // Do something when page ready.
 },
 onShow: function() {
  // Do something when page show.
 },
 onHide: function() {
  // Do something when page hide.
 },
 onUnload: function() {
  // Do something when page close.
 },
 onPullDownRefresh: function() {
  // Do something when pull down.
 },
 onReachBottom: function() {
  // Do something when page reach bottom.
 },
 // Event handler.
 viewTap: function () {
  var p = this.position
  ball(p, 150)
  function ball(x, y) {
   console.log(x,y)
  }
 },
 customData: {
  hi: 'MINA'
 }
})

1、设置data数据

setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。注意: 

(1)、直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。 

(2)、单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。

setData() 参数格式:接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value。其中 key 可以非常灵活,以数据路径的形式给出,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义。
下面设置data中的text和genre_index的值

this.setData({
   'state.genre_index':1,
   text:'data value'
})

2、获取data数据

获取data中的text和genre_index值需要使用this

var gener_index=this.data.state.genre_index
var text=this.data.text

3、调用viewTap函数

在viewTap函数中调用内部的ball函数可以直接调用,如果需要在onReady函数中调用viewTap函数需要使用this。

onReady: function () {
  this.drawBall()
 },

以上所述是小编给大家介绍的微信小程序Page中data数据操作和函数调用详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery的一些注意
Dec 06 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
JavaScript常用工具函数大全
May 06 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 Javascript
vue中使用props传值的方法
May 08 #Javascript
vue权限问题的完美解决方案
May 08 #Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 #Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 #Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 #Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 #Javascript
vue实现菜单切换功能
May 08 #Javascript
You might like
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
python实现计算资源图标crc值的方法
2014/10/05 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
业务助理岗位职责
2013/11/18 职场文书
快递业务员岗位职责
2014/01/06 职场文书
党校学习思想汇报
2014/01/06 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
水电工岗位职责
2014/02/12 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
户外活动总结范文
2014/04/30 职场文书
党委班子剖析材料
2014/08/21 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2015年外联部工作总结
2015/04/03 职场文书
三八节活动主持词
2015/07/04 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
比较node.js和Deno
2021/04/27 Javascript
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript