【微信小程序】template模板使用详解

  WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

  模板的作用域:

  模板拥有自己的作用域,只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。

定义模板

<template name='allgood-item'>
  <image src='{{icon}}' class='all_item_image'/>
  <view class='all_item_right'>
    <text class='all_item_title'>{{title}}</text>
    <view class='all_item_details'>
      <view>
        <text class='all_item_new'>{{newPrice}}</text>
        <text class='all_item_old'>{{oldPrice}}</text>
      </view>
      <text class='all_item_buy'>立即购买</text>
    </view>
  </view>
</template>

使用模板

<import src='./allgood-item-template/allgood-item-template.wxml'/>

<block wx:for='{{modelArray}}'>
    <template is='allgood-item' data='{{...item}}' />
</block>

  微信小程序结合使用ES6+的解构和属性延展,我们给template传递一批属性更为方便了。

定义模板样式

.all_item_image {
   ...    
}
   ...
.all_item_new,.all_item_old,.all_item_buy{
   ...
}

引用模板样式

@import './allgood-item-template/allgood-item-template.wxss';

template进行绑定事件

<block wx:for='{{modelArray}}'>
  <view class='all_item_view' bindtap='toDetails'>
    <template is='allgood-item' data='{{...item}}' />
  </view>
</block>

 

全部评论

相关推荐

点赞 评论 收藏
分享
刚刷到字节跳动官方发的消息,确实被这波阵仗吓了一跳。在大家还在纠结今年行情是不是又“寒冬”的时候,字节直接甩出了史上规模最大的转正实习计划——ByteIntern。咱们直接看几个最硬的数,别被花里胡哨的宣传词绕晕了。首先是“量大”。全球招7000多人是什么概念?这几乎是把很多中型互联网公司的总人数都给招进来了。最关键的是,这次的资源分配非常精准:研发岗给了4800多个Offer,占比直接超过六成。说白了,字节今年还是要死磕技术,尤其是产品和AI领域,这对于咱们写代码的同学来说,绝对是今年最厚的一块肥肉。其次是大家最关心的“转正率”。官方直接白纸黑字写了:整体转正率超过50%。这意味着只要你进去了,不划水、正常干,每两个人里就有一个能直接拿校招Offer。对于2027届(2026年9月到2027年8月毕业)的同学来说,这不仅是实习,这简直就是通往大厂的快捷通道。不过,我也得泼盆冷水。坑位多,不代表门槛低。字节的实习面试出了名的爱考算法和工程实操,尤其是今年重点倾斜AI方向,如果你简历里有和AI相关的项目,优势还是有的。而且,转正率50%也意味着剩下那50%的人是陪跑的,进去之后的考核压力肯定不小。一句话总结:&nbsp;27届的兄弟们,别犹豫了。今年字节这是铁了心要抢提前批的人才,现在投递就是占坑。与其等到明年秋招去千军万马挤独木桥,不如现在进去先占个工位,把转正名额攥在手里。
喵_coding:别逗了 50%转正率 仔细想想 就是转正与不转正
字节7000实习来了,你...
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务