版权声明:本文为博主原创文章,未经博主允许不得转载 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>