微信小程序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 面向对象编程基础 多态
Aug 21 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
Javascript中typeof 用法小结
May 12 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 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
咖啡的植物学知识
2021/03/03 咖啡文化
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
详解webpack babel的配置
2018/01/09 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
python爬取拉勾网职位数据的方法
2018/01/24 Python
python在文本开头插入一行的实例
2018/05/02 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
反邪教警示教育方案
2014/05/13 职场文书
国际金融专业自荐信
2014/07/05 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
2015国庆节宣传语
2015/07/14 职场文书
爱国主题班会教案
2015/08/14 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
python 管理系统实现mysql交互的示例代码
2021/12/06 Python