微信小程序之页面与数据交互

最新推荐文章于 2025-12-07 19:43:03 发布

原创最新推荐文章于 2025-12-07 19:43:03 发布 · 812 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍了一种在WXML中利用wx.for指令结合wx:key属性实现动态数据绑定的方法，并展示了如何通过JS设置数据来更新视图。

HTML用wx.for进行列表渲染

<block wx:for='{{listData}}' wx:key='{{index}}' >
<template catchtap="toDetails"  is="listTem" data="{{...item}}"/>
</block>

js长这样：

let listData = require('../../datas/list-data.js') //引入数据
Page({

  /**
   * 页面的初始数据
   */
  data: {
    listData:[]  //创建空数组
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
    this.setData({listData:listData.list_data}) //设置数据
  }