1.微信小程序之模板使用

版权声明：本文为博主原创文章，未经博主允许不得转载 https://blog.csdn.net/panzina/article/details/82941338

啦啦啦啦啦，今天来探讨一下模板的使用。

1.定义模板

使用name属性，定义模板的名字，在<//template >内定义模板内容,在template.wxml

<template name="list">
  <view class='box'>
    <image src='/images/detail/carousel/01.jpg'></image>
    <text>哈哈哈哈哈哈哈</text>
  </view>
</template>

咱们给模板加点样式 template.wxml

.box{
  border-bottom: 6rpx solid #eee;
  padding-bottom: 20rpx;
}
image{
  width: 100%;
}
text{
  font-size: 32rpx;
}

2.使用模板

hhh.wxml 页面。使用is属性声明需要的模板，注意要先使用import进行导入

<import src='/pages/template/template.wxml'/>
<template is="list"></template>

3.结果

大功告成！？等等，有没有觉得样式根本就没设置呀

由于没有在hhh.wxss内引入样式，故样式不起作用

@import '/pages/test/test.wxss';

啦啦啦，这次是我们想看到的

4.如何在模板中传值

声明需要的模板时，使用data进行传值。其中{{…item}} “item”是wx:for的当前项，“…”是es6中的三点运算符，这里的作用是展开运算符，在模板里不需要再{{ item.xxx }}，而是直接{{ xxx }}

<import src='/pages/test/test.wxml'/>
<block wx:for="{{listArr}}" wx:key="index">
  <template is="list" data="{{...item}}"></template>
</block>

在hhh.js中要获取到数据，具体略

data: {
    listArr:[]
  },

模板

<template name="list">
  <view class='box'>
    <image src='{{detail_img}}'></image>
    <text>{{author}}</text>
  </view>
</template>