微信小程序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遍历 table的脚本
Jul 23 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 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 禁止页面缓存输出
2009/01/07 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
javascript轮播图算法
2016/10/21 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
python多线程用法实例详解
2015/01/15 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
Python字符串三种格式化输出
2020/09/17 Python
Python3获取cookie常用三种方案
2020/10/05 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
路政管理专业推荐信
2013/11/11 职场文书
大学班长的职责
2014/01/27 职场文书
公休请假条
2014/04/11 职场文书
营业用房租赁协议书
2014/11/26 职场文书
CAD实训总结范文
2015/08/03 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
python中pymysql包操作数据库方法
2022/04/19 Python