微信小程序 详解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编程起步(第二课)
Feb 27 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 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 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
python基于socket实现网络广播的方法
2015/04/29 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
Python数据库小程序源代码
2019/09/15 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
python实现程序重启和系统重启方式
2020/04/16 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
咖啡馆创业计划书
2014/01/26 职场文书
职工运动会感言
2014/02/07 职场文书
环保标语口号
2014/06/13 职场文书
2014年派出所工作总结
2014/11/21 职场文书
2015年药店工作总结
2015/04/20 职场文书
暂住证证明
2015/06/19 职场文书
python实现会员信息管理系统(List)
2022/03/18 Python
使用Python开发冰球小游戏
2022/04/30 Python