• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序模板中使用循环

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

原创文章

本篇介绍如何在模板里使用循环。
方法一:
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。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap