微信小程序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 相关文章推荐
JS方法调用括号的问题探讨
Jan 24 Javascript
JS制作简单的三级联动
Mar 18 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
Element Steps步骤条的使用方法
Jul 26 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
PHP设计聊天室步步通
2006/10/09 PHP
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
ajax php 实现写入数据库
2009/09/02 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
php实现webservice实例
2014/11/06 PHP
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
在Python中使用判断语句和循环的教程
2015/04/25 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
Python中super函数用法实例分析
2019/03/18 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
python语言基本语句用法总结
2019/06/11 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
总经理助理的八要求
2013/11/12 职场文书
大学毕业通用个人的求职信
2013/12/08 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
投标邀请书范文
2014/01/31 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
教师考察材料范文
2014/06/03 职场文书
房产协议书范本2014
2014/09/30 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python