微信小程序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 AutoScroller 函数类
May 29 Javascript
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
javascript 显示当前系统时间代码
Dec 28 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
jQuery异步提交表单实例
May 30 jQuery
js匿名函数使用&传参(实例)
Sep 08 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
JS实现前端动态分页码代码实例
Jun 02 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
再次研究下cache_lite
2007/02/14 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
初步讲解Python中的元组概念
2015/05/21 Python
python Django框架实现自定义表单提交
2016/03/25 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
python递归函数用法详解
2020/10/26 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
酒店管理自荐信
2013/10/23 职场文书
岗位职责的构建方法
2014/02/01 职场文书
四群教育工作实施方案
2014/03/26 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
2014年纠风工作总结
2014/12/08 职场文书
律政俏佳人观后感
2015/06/09 职场文书
Python数据处理的三个实用技巧分享
2022/04/01 Python
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技