今天在开发小程序的时候,需要实现一个列表文章,而且每个item的布局都一样,所以我用了模板来实现:
.wxml文件
<!--列表模板-->
<template name="msgItem">
<view class='content_head'>
<view class='content_title'>
<text>{{data_content_title}}</text>
</view>
<view class='author'>
<text>Form:</text>
<text>{{author}}</text>
</view>
</view>
<view class='content_text'>
<text >{{data_content_text}}</text>
</view>
</template>
<!--循环输出列表-->
<view class='content_item' wx:for="{{item_list}}">
<template is="msgItem" data="{{...item}}"/>
</view>
.js文件
data: {
item_list: [
{
id: "1",
data_content_title:"这里是标题1,
data_content_text: "这里是内容这里是内容这里是内容",
author:"小华",
},
{
id: "2",
data_content_title: "这里是标题2",
data_content_text: "这里是内容这里是内容这里是内里",
author: "小明",
},
]
}
.wxss文件略
注意:
当使用模板时,要注意模板的作用域,开发文档中是这样说的:
模板的作用域
模板拥有自己的作用域,只能使用 data 传入的数据以及模版定义文件中定义的 <wxs /> 模块。
比如说:因为在列表渲染中,循环的是 data 中的 item_list 这个数组,所以,模板里所有的 {{xxx}} 的数据必须在data 里的item_list 数组里定义,否则模板读取不到数据。
<view class='content_item' wx:for="{{item_list}}">
这样就可以实现列表的循环渲染了。
但是,坑来了!
当你对 data :{ } 里面其中一个元素进行重新赋值或者其它操作的时候,一般我们是这样提取出来的:
var ctitle = this.data.title;
但是数组中就不能这样,要数组加下标的格式:
var ctitle = this.data.item_list[0].title;
对数组的某个元素 setData 时也要加下标,并且要加单引号在外面:
this.setData({ 'item_list[0].title': "我是标题" })
最后,我趟过的坑希望你们能顺利跳过!!!有错误请指正!