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中布局,元素命名需要提前思考周详尽量复用

[github上的开源demo][1]
[1]:https://github.com/vace/wechatapp-news-reader