1、新建.wxml .wxss
2、编写
<
template
name=
"postItem">
<
view
class=
'post-container'>
<
view
class=
'post-author-date'>
<
image
src=
'{{item.avatar}}'></
image
>
<
text
>{{item.author}}
</
text
>
</
view
>
<
text
class=
'post-title'>{{item.title}}
</
text
>
<
image
class=
'post-image'
src=
'{{item.imgSrc}}'></
image
>
<
text
class=
'post-content'>{{item.content}}
</
text
>
<
view
class=
'post-like'>
<
image
class=
'view'
src=
'/images/view.png'></
image
>
<
text
class=
'view-txt'>92
</
text
>
<
image
class=
'collect'
src=
'/images/star.jpg'></
image
>
<
text
class=
'collect-txt'>65
</
text
>
</
view
>
</
view
>
</
template
>
3、.wxml使用
<
import
src=
"post-item/post-item-template.wxml"
/
> <!--重点!-->
<
block
wx:for=
"{{posts_key}}"
wx:for-item=
"item">
<!--template -->
<
template
is=
"postItem"
data=
"{{item}}"
/
>
</
block
>
4、样式使用 .wxss
@import "
post-item/
post-item-template.
wxss";
注:
import 相对路径绝对路径都可以 require:相对路径否则报错
脚本文件不能运行
...item data里面传入...data 在模板中 可以把item.title直接写成title
<text class='post-title'>{{item.title}}</text>
改写:<text class='post-title'>{{title}}</text>
.wxml
<
block
wx:for=
"{{posts_key}}"
wx:for-item=
"...item">
<!--template -->
<
template
is=
"postItem"
data=
"{{item}}"
/
>
</
block
>
<
template
name=
"postItem">
<
view
class=
'post-container'>
<
view
class=
'post-author-date'>
<
image
src=
'{{item.avatar}}'></
image
>
<
text
>{{item.author}}
</
text
>
</
view
>
<
text
class=
'post-title'>{{item.title}}
</
text
>
<
image
class=
'post-image'
src=
'{{item.imgSrc}}'></
image
>
<
text
class=
'post-content'>{{item.content}}
</
text
>
<
view
class=
'post-like'>
<
image
class=
'view'
src=
'/images/view.png'></
image
>
<
text
class=
'view-txt'>92
</
text
>
<
image
class=
'collect'
src=
'/images/star.jpg'></
image
>
<
text
class=
'collect-txt'>65
</
text
>
</
view
>
</
view
>
</
template
>