codecamp

百度智能小程序 setData机制

解释:

setData 函数用于将数据,从逻辑层发送到视图层,当开发者调用 setData 后,数据的变化会引起视图层的更新。参数说明

属性 类型 默认值 必填 描述
data Object 这次要改变的数据
callback Function setData 引起的界面更新渲染完毕后的回调函数

说明:

  • Object 以key: value的形式表示,将this.data中的key对应的值改变成value。key可以以数据路径的形式给出,支持改变数组中的某一项或对象的某个属性,如array[2].message、a.b.c.d,并且不需要在 this.data中预先定义;
  • 直接修改this.data而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致;
  • 仅支持设置可 JSON 化的数据;
  • 请不要把data中任何一项的 value 设为 undefined,否则将会有一些潜在问题出现;
  • data 的键名必须遵守 camelCase (驼峰式)的命名规范,不得使用 kebab-case (短横线隔开式)规范。

代码示例 

在开发者工具中打开
<!-- index.swan -->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>

<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </button>

<view>{{arr[0].text}}</view>
<button bindtap="changeItemInArr"> Change Arr data </button>

<view>{{obj.text}}</view>
<button bindtap="changeItemInObj"> Change Obj data </button>

<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
// index.js
Page({
    data: {
        text: 'init data',
        num: 0,
        arr: [{text: 'init data'}],
        obj: {
            text: 'init data'
        }
    },
    changeText() {
        // 不要直接通过 this.data.text = 'changed data' 修改this.data,应该使用 setData
        this.setData({
            text: 'changed data'
        });
    },
    changeNum() {
        // 或者,可以修改 this.data 之后马上用 setData 设置一下修改了的字段
        this.data.num = 1
        this.setData({
            num: this.data.num
        });
    },
    changeItemInArr() {
        // 对于对象或数组字段,可以直接修改一个子字段,这样方式会有带来更好的性能
        this.setData({
            'arr[0].text':'changed data'
        });
    },
    changeItemInObj(){
        this.setData({
            'obj.text': 'changed data'
        });
    },
    addNewField() {
        this.setData({
            'newField.text': 'new data'
        });
    }
});

连续使用 setData 来改变界面的方法也可以达到动画的效果。这样可以任意地改变界面,但通常会产生较大的延迟或卡顿,甚至导致小程序僵死。此时可以通过将页面的 setData 改为 自定义组件 中的 setData 来提升性能。下面的例子是使用 setData 来实现秒表动画的示例。

代码示例 

在开发者工具中打开
<view>
  <stopwatch id="stopwatch" class="stopwatch" />
  <button class="btn" s-if="{{!started}}" bindtap="start">开始计时</button>
  <button class="btn" s-if="{{started}}" bindtap="stop">停止计时</button>
</view>
const app = getApp()

Page({
  data: {
    started: false
  },
  start: function() {
    this.setData({
      started: true
    })
    this.selectComponent('#stopwatch').start()
  },
  stop: function() {
    this.setData({
      started: false
    })
    this.selectComponent('#stopwatch').stop()
  }
})
// 自定义组件中js
Component({
  data: {
    text: '00:00.000'
  },
  methods: {
    start: function() {
      var convertTimeStampToString = function(ts) {
        var ms = String(1000 + Math.floor(ts) % 1000).slice(1)
        var s = String(100 + Math.floor(ts / 1000) % 60).slice(1)
        var m = Math.floor(ts / 60000)
        if (m < 10) m = '0' + m
        return m + ':' + s + '.' + ms
      }
      this.setData({
        text: convertTimeStampToString(0)
      })
      var startTime = Date.now()
      var self = this
      this._interval = setInterval(function() {
        self.setData({
          text: convertTimeStampToString(Date.now() - startTime)
        })
      }, 33)
    },
    stop: function() {
      clearInterval(this._interval)
    }
  }
})

逻辑层在设置数据后可执行函数。

代码示例


this.setData({
    text: 'Set some data for updating view.'
}, function() {
    // this is setData callback
})


百度智能小程序 组件事件处理函数
百度智能小程序 getCurrentPages
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

百度智能小程序开发文档

百度智能小程序 组件

百度智能小程序 地图

百度智能小程序 画布

百度智能小程序 API

百度智能小程序 界面

百度智能小程序 关注小程序引导组件

百度智能小程序 自定义组件

百度智能小程序 媒体

百度智能小程序 设备

百度智能小程序 拨打电话

百度智能小程序 内存警报

百度智能小程序 手机联系人

百度智能小程序 用户截屏事件

百度智能小程序 第三方平台

百度智能小程序 开放接口

百度智能小程序 百度收银支付

百度智能小程序 分包预下载

百度智能小程序 数据分析

百度智能小程序 服务端

百度智能小程序 云开发

百度智能小程序 初始化

百度智能小程序 云函数

百度智能小程序 服务端初始化

百度智能小程序 服务器获取上下文

百度智能小程序 服务端云函数

百度智能小程序 开发教程

百度智能小程序 功能开发

百度智能小程序 基本原理

百度智能小程序 小程序自动化

百度智能小程序 视频教程

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }