wxml
<view class="articles">
<block wx:for="{{ articles }}" wx:key="id">
<template is="{{ 'newsStyle' + item.style }}" data="{{ ...item }}" />
</block>
</view>
//使用模板
template
<!--無圖模式-->
<template name="newsStyle0">
<navigator url="/pages/news/detail?id={{ id }}&chid={{ chid }}&style={{ style }}&tag={{ tag }}">
<view class="article__item">
...
</view>
</navigator>
</template>
<!--三圖模式-->
<template name="newsStyle1">
<navigator url="/pages/news/detail?id={{ id }}&chid={{ chid }}&style={{ style }}&tag={{ tag }}">
<view class="article__item article__item__cover">
...
</view>
</navigator>
</template>
<!--普通模式-->
<template name="newsStyle2">
<navigator url="/pages/news/detail?id={{ id }}&chid={{ chid }}&style={{ style }}&tag={{ tag }}">
<view class="article__item">
...
</view>
</navigator>
</template>
css
直接在app.wxss中布局,元素命名需要提前思考周詳盡量復(fù)用
[github上的開源demo][1]
[1]:https://github.com/vace/wechatapp-news-reader
