微信小程序开发-setData()方法

最新推荐文章于 2025-11-12 15:00:27 发布

原创最新推荐文章于 2025-11-12 15:00:27 发布 · 3.4k 阅读

0 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个关于小程序页面数据加载的实例，展示了如何通过监听页面加载生命周期函数来动态更新页面显示内容的方法。具体包括如何从传入参数中获取信息并设置到页面数据中，确保展示正确的标题、地址和图片。

注意：

直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    title:null,
    descTime:null,
    descAdress:null,
    headerImg:null,
    sihe:{
      headerImg:'../../images/detail/sihe.jpg',
      title:'北京四合院之美',
      address:'北京海淀',
      time:'2018/10/1'
    },
    gsw: {
      headerImg: '../../images/detail/q.jpg',
      title: '贵霜王朝的艺术',
      address: '无锡新梅路81号',
      time: '2018/10/1'
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var param = options.id;
    var showInfo = this.data[param];
    this.setData({
      title: showInfo.title,
      address: showInfo.address,
      headerImg: showInfo.headerImg
      })
  }


})