微信小程序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浏览器兼容教程之事件处理
Jun 09 Javascript
JS制作简单的三级联动
Mar 18 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
JavaScript实现前端分页控件
Apr 19 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
JS实现判断数组是否包含某个元素示例
May 24 Javascript
Vue自定义多选组件使用详解
Sep 08 Javascript
js代码编写无缝轮播图
Sep 13 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最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
33道php常见面试题及答案
2015/07/06 PHP
jquery实用代码片段集合
2010/08/12 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
分析python服务器拒绝服务攻击代码
2014/01/16 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
健康家庭事迹材料
2014/05/02 职场文书
党支部特色活动方案
2014/08/20 职场文书
土地转让协议书
2014/09/27 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
读后感作文评语
2014/12/25 职场文书
电影建党伟业观后感
2015/06/01 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers