微信小程序中template使用循环

最新推荐文章于 2025-03-28 13:40:18 发布

原创

最新推荐文章于 2025-03-28 13:40:18 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在微信小程序中使用template结合循环来渲染数据。通过将数据传入data，然后在template的wxml中利用这些数据进行循环展示。在实际应用中，首先引入template，接着设置data，如`<import src="/path/to/template.wxml" />`，然后在页面数据中定义`hotData`，即可实现模板的循环渲染。

我们有的时候会用到template，然后template中我们又想使用循环来渲染数据

那么可以使用data将数据传入，然后使用data中的数据进行循环渲染

比如我们的template中hot的wxml如下

<template name="hot">
<view wx:for="{
  
  {hotData}}"><view style="width:94%;height:200rpx;margin:0 auto">
      <view style="width:10%;height:100%;float:left;text-align:center;"><view style="margin-top:40rpx">{
  
  {item}}</view></view>
      <view class="hotText" style="width:60%;height:100%;float:left;">
         <text>印度最大贫民窟首次报告新冠确诊案列，这个意味着什么？印度疫情会大规模爆发吗？</text>
      </view>
      <view style="width:28%;height:100%;float:right">
         <image style="width:100%;height:130rpx;margin-top:10rpx;border-radius:8px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586020213358&di=0f21ad896d614dca598ff4451bcacda5&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01b001559b360a32f87598b5fff9