微信小程序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小框架 fly javascript framework
Nov 26 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 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版(3)
2006/10/09 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
php简单实现MVC
2015/02/05 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
微信支付开发订单查询实例
2016/07/12 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
pandas 选择某几列的方法
2018/07/03 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
日语专业推荐信
2013/11/12 职场文书
小区推广策划方案
2014/06/06 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
物业工程部岗位职责
2015/02/11 职场文书
工作推荐信模板
2015/03/25 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书