小程序--template

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 >