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

雨点打透心脏的1/2处 2022-05-09 08:38 152阅读 0赞

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

## 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进行导入

## 3.结果 ##

大功告成！？等等，有没有觉得样式根本就没设置呀  
![在这里插入图片描述][70]

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

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

啦啦啦，这次是我们想看到的  
![在这里插入图片描述][70 1]

## 4.如何在模板中传值 ##

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

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

data: {
        listArr:[]
      },

模板

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

[70]: /images/20220509/d55df134090c4e19b9595f9bd2bec88e.png
[70 1]: /images/20220509/f078d6ec4db7483eb12d73901840ac9d.png
[item.xxx]: http://item.xxx