微信小程序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 相关文章推荐
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 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/10 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
php验证码生成器
2017/05/24 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
教师实习自我鉴定
2013/12/11 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
大学生就业意向书范文
2014/04/01 职场文书
单位委托书范本
2014/04/04 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
药店采购员岗位职责
2014/09/30 职场文书
司考复习计划
2015/01/19 职场文书
超市员工辞职信范文
2015/05/12 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
python实现过滤敏感词
2021/05/08 Python
python入门学习关于for else的特殊特性讲解
2021/11/20 Python
如何利用python实现Simhash算法
2022/06/28 Python
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS