微信小程序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 相关文章推荐
JavaScript 加号(+)运算符号
Dec 06 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
vue.js使用3DES加密的方法示例
May 18 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
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
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
PHP实现倒计时功能
2020/11/16 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
js实现搜索栏效果
2018/11/16 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
详解Python中的测试工具
2019/06/09 Python
Python猜数字算法题详解
2020/03/01 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
会计学个人自荐信模板
2013/12/13 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
工程售后服务承诺书
2014/05/21 职场文书
技术员岗位职责
2015/02/04 职场文书
导游词400字
2015/02/13 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
党小组考察意见
2015/06/02 职场文书
趣味运动会加油词
2015/07/18 职场文书
求职自我评价参考范文
2019/05/16 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python