微信小程序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和CSS速查手册
Aug 20 Javascript
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
js+css实现导航效果实例
Feb 10 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
JS 事件机制完整示例分析
Jan 15 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中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
学习面向对象之面向对象的术语
2010/11/30 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
原生js实现购物车
2020/09/23 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python采用getopt解析命令行输入参数实例
2014/09/30 Python
python导入时小括号大作用
2017/01/10 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
python微信撤回监测代码
2019/04/29 Python
20行python代码实现人脸识别
2019/05/05 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
公司司机岗位职责范本
2014/03/03 职场文书
水毁工程实施方案
2014/04/01 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
Python实现文字pdf转换图片pdf效果
2022/04/03 Python