zoukankan      html  css  js  c++  java
  • 微信小程序模板中使用循环

    原创文章

    本篇介绍如何在模板里使用循环。
    方法一:
    template.wxml,该文件内容为:

    <template name="msgItem1">
    <block wx:for="{{product1}}" wx:for-item="item" wx:key="pro">
      <view>
        <text> {{item.index}}: {{item.msg}} </text>
        <text> Time: {{item.time}} </text>
      </view>
      </block>
    </template>

    方法二:使用模板:
    template.wxml,该文件内容为:

    <template name="msgItem">
      <view>
        <text> {{index}}: {{msg}} </text>
        <text> Time: {{time}} </text>
      </view>
    </template>
    <template name="msgItem1">
    <block wx:for="{{product1}}" wx:for-item="item" wx:key="pro">
      <template is="msgItem" data="{{...item}}"/>
    </block>
    </template>

    index.js的内容为:

    Page({
      data: {
        product1: [{
          index: 0,
          msg: 'this is a template',
          time: '217-09-15'
        }, {
          index: 1,
          msg: 'this is a template',
          time: '2020-09-15'
          }, {
            index: 2,
            msg: 'this is a template',
            time: '2018-09-15'
          },]
       },
    })

    我们在index.wxml里的内容为:

    <import src="../template/template.wxml"/>
    <template is="msgItem1" data="{{product1}}"/>

    这里不需要使用扩展运算符展开product1。

  • 相关阅读:
    游LeetCode一月之闲谈
    新年计划与企盼
    F#周报2019年第51&52期
    F#周报2019年第50期
    F#周报2019年第49期
    F#周报2019年第48期
    F#周报2019年第47期
    F#周报2019年第46期
    F#周报2019年第45期
    关于我的随笔
  • 原文地址:https://www.cnblogs.com/yanduanduan/p/8745573.html
Copyright © 2011-2022 走看看