微信小程序 详解Page中data数据操作和函数调用


Posted in Javascript onJanuary 12, 2017

微信小程序 详解Page中data数据操作和函数调用

Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

//index.js 
<pre code_snippet_id="2049407" snippet_file_name="blog_20161214_1_1145312" name="code" class="javascript">Page({ 
 data: { 
  text: "This is page data.",</pre><pre code_snippet_id="2049407" snippet_file_name="blog_20161214_2_861121" name="code" class="javascript">  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' 
 } 
})</pre><br> 
<p></p> 
<pre></pre> 
<br> 
1、设置data数据 
<p></p> 
<p><span style="font-size:14px">setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。<br> 
注意:<br> 
(1)、直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。<br> 
(2)、单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。<br> 
</span></p> 
<p><span style="font-size:14px">setData() 参数格式:接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value。其中 key 可以非常灵活,以数据路径的形式给出,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义。<br> 
</span></p> 
<p><span style="font-size:14px">下面设置data中的text和genre_index的值</span></p> 
<p><span style="font-size:14px"></span></p><pre code_snippet_id="2049407" snippet_file_name="blog_20161214_3_1831450" name="code" class="html">this.setData({ 
   'state.genre_index':1, 
   text:'data value' 
})</pre><p></p> 
<p>2、获取data数据</p> 
<p>获取data中的text和genre_index值需要使用this</p> 
<p></p><pre code_snippet_id="2049407" snippet_file_name="blog_20161214_4_5833420" name="code" class="javascript"><pre code_snippet_id="2049407" snippet_file_name="blog_20161214_4_5833420" name="code" class="javascript">var gener_index=this.data.state.genre_index</pre><pre code_snippet_id="2049407" snippet_file_name="blog_20161214_5_8406932" name="code" class="javascript">var text=this.data.text</pre><p></p> 
<pre></pre> 
3、调用viewTap函数 
<p></p> 
<p>在viewTap函数中调用内部的ball函数可以直接调用,如果需要在onReady函数中调用viewTap函数需要使用this。</p> 
<p></p><pre code_snippet_id="2049407" snippet_file_name="blog_20161214_6_6869005" name="code" class="html">onReady: function () { 
  this.drawBall() 
 },</pre><br> 
<br> 
<br> 
<p></p> 
<br> 
   
</pre>
Javascript 相关文章推荐
javascript 鼠标滚轮事件
Apr 09 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
DIV始终居中的js代码
Feb 17 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
详解vue渲染函数render的使用
Dec 12 Javascript
js实现随机8位验证码
Jul 24 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 #Javascript
js实现微博发布小功能
Jan 12 #Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 #Javascript
canvas实现绘制吃豆鱼效果
Jan 12 #Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 #Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 #Javascript
JS实现仿百度文库评分功能
Jan 12 #Javascript
You might like
php生成xml简单实例代码
2009/12/16 PHP
.htaccess文件保护实例讲解
2011/02/06 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
python读取并写入mat文件的方法
2019/07/12 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
介绍一下linux的文件系统
2015/10/06 面试题
马云的职业生涯规划之路
2014/01/01 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
单位单身证明样本
2014/10/11 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
刑事申诉状范文
2015/05/20 职场文书
为自己工作观后感
2015/06/11 职场文书
好员工观后感
2015/06/17 职场文书