微信小程序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 08 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
js实现删除json中指定的元素
Sep 22 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开发过程中关于继承的使用方法分享
2011/06/17 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
php cli 小技巧
2013/06/03 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
php连接mysql数据库
2017/03/21 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
JavaScript中number转换成string介绍
2014/12/31 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
numpy数组广播的机制
2019/07/12 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
介绍Java的内部类
2012/10/27 面试题
介绍一下Linux文件的记录形式
2013/09/29 面试题
建筑专业自荐信范文
2014/01/05 职场文书
一年级学生评语大全
2014/04/21 职场文书
先进班集体申报材料
2014/12/26 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
python语言中pandas字符串分割str.split()函数
2022/08/05 Python