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。

  • 相关阅读:
    [ZJOI2012]灾难
    java实现风险度量
    大字段字符类型
    [CQOI2011]放棋子
    java实现还款计算
    java实现还款计算
    java实现字符串比较
    java实现字符串比较
    快速插入一百万行数据储存过程
    [六省联考2017]分手是祝愿
  • 原文地址:https://www.cnblogs.com/yanduanduan/p/8745573.html
Copyright © 2011-2022 走看看