微信小程序学习（三）——wx:for的使用

港控/mmm° 2022-06-01 06:26 91阅读 0赞

# 微信小程序学习（三）——wx:for的使用 #

本文主要介绍值得绑定以及如何在界面中显示重复元素。

本文主要参考：https://www.w3cschool.cn/weixinapp/weixinapp-list.html

好，下面上货。

1、首先新建一个页面，在页面中添加如下内容：

<view class="container">
      <view wx:for="{
        {array}}" wx:key="index">
      {
        {index}}:{
        {item}}
      </view>
      <view>========================</view>
      <view wx:for="{
        {array2}}" wx:key="index">
      {
        {index}}:{
        {item.message}}
      </view>
      <view>========================</view>
      <view wx:for="{
        {array2}}" wx:for-index="idx" wx:for-item="itemName" wx:key="index">
        {
        {idx}}: {
        {itemName.message}}
      </view>
      <view>========================</view>
      
      <block wx:for="{
        {array2}}" wx:key="index">
        <view>this is test</view>
        <view>{
        {index}}:{
        {item.message}}</view>
      </block>
    </view>

2、修改其对应的js文件

Page({
      data: {
        memo:"123",
        array: [],
        array2:[],
      },
      onLoad:function(){
        var tmparr = [1,2,3,4,5];
        var tmparr2 = [{message:"aa"},{message:"bb"}];
        this.setData({
          array:tmparr,
          array2:tmparr2,
        })
      },
      getremotedata:function(e){
        console.log("getremotedata");
      }
    })

3、启动页面，查看页面内容：

![SouthEast][]

[SouthEast]: /images/20220601/fe7691627f944b71863092ba86156fdd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，91人围观）

还没有评论，来说两句吧...

相关阅读

相关学习微信小程序

、从小程序指南文档开始看起：[小程序指南][Link 1] 2、开发者工具下载：[小程序开发工具][Link 2] 转载于:https://www.cnb...

亦凉/ 2024年04月20日 10:49/ 0 赞/ 83 阅读

相关微信小程序使用函数的三种方法

使用来自不同页面的函数函数写在util.js页面 function formatTime(date) { var year = date.getFu

我就是我/ 2022年12月31日 01:29/ 0 赞/ 85 阅读

相关微信小程序学习（三）——wx:for的使用

微信小程序学习（三）——wx:for的使用本文主要介绍值得绑定以及如何在界面中显示重复元素。本文主要参考：https://www.w3cschool.cn

港控/mmm°/ 2022年06月01日 06:26/ 0 赞/ 92 阅读

相关微信小程序学习路线

`之前有学弟问我如何学习小程序开发，以下是我的学习路线，大家仅供参考` ![这里写图片描述][70] -------------------- 欢迎加我微信，一起交流，

骑猪看日落/ 2022年05月26日 04:09/ 0 赞/ 272 阅读

相关微信小程序：微信小程序插件使用

> 小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公

╰+哭是因爲堅強的太久メ/ 2022年04月10日 06:47/ 0 赞/ 567 阅读

相关微信小程序学习笔记

页面跳转可以用js点击事件wx.navigateTo（\{url：‘…’\}）来实现，也可以直接用`<navigator url=’...’></navigator>`来操作

客官°小女子只卖身不卖艺/ 2022年02月19日 11:09/ 0 赞/ 360 阅读

相关微信小程序学习点滴

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] [\\微信小程序学习点滴 \\《一》：如何获取时间，

淡淡的烟草味﹌/ 2022年01月16日 05:09/ 0 赞/ 233 阅读

相关微信小程序：注册微信小程序

注册小程序帐号在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。 ![20170521234518211][] 选择注册

短命女/ 2021年12月09日 03:53/ 0 赞/ 698 阅读

相关微信小程序学习：（三）轮播图

微信小程序学习：（三）轮播图项目地址：[https://github.com/leoricding/-][https_github.com_leoricding_-]

谁借莪１个温暖的怀抱￠/ 2021年12月04日 00:37/ 0 赞/ 320 阅读

相关微信小程序开发《三》 WXML

定义 WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。数据绑定 < view>\

浅浅的花香味﹌/ 2021年09月19日 10:48/ 0 赞/ 359 阅读