微信小程序中模板的使用和数据的传递

本文介绍了如何在小程序中使用模板文件(templatename: youhui_list)展示商品信息,通过wx:for遍历数据数组并详细展示了图片、名称、标题和价格等元素的渲染。内容涵盖了定义模板文件、数据传递和视图组件的使用。
摘要由CSDN通过智能技术生成

1.项目布局
template为模板文件
在这里插入图片描述
2.定义模板文件的内容,以及数据的获取和遍历

  <template name="youhui_list">
    <view class="youhui_list" wx:for="{{arrays}}">
      <block>
            <view class="shop_img">
              <image src="{{item.img}}"></image>
            </view>
            <view class="shop_name">
              {{item.name}}
            </view>
            <view class="shop_title">
              {{item.title}}
            </view>
            <view class="price">
             <view class="price_num">
              {{item.dis_price}}
             </view>
             <view class="dis_price">
              {{item.dis_price}}
             </view>
            </view>
          </block>
    </view>
    
  </template>

3.使用模板布局和数据的传递

<import src="../template/template.wxml"></import>
<view class="con_shop">
<template is="youhui_list" data="{{arrays}}"></template>
</view>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

原克技术

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值