微信小程序的开发之瀑布流功能

就直接上代码啦~~~

<!--  瀑布流  -->
    <view class="content">
      <view class="left">
        <block wx:for="{{note}}" wx:key="">
          <template is="item" data="{{...item}}" wx:if="{{index%2==0}}"></template>
        </block>
      </view>
      <view class="right">
        <block wx:for="{{note}}" wx:key="">
          <template is="item" data="{{...item}}" wx:if="{{index%2==1}}"></template>
        </block>
      </view>
    </view>
    <!--  下面是一个模块 -->
    <template name="item">
      <view class="item">
      <navigator data-item='{{itemIndex}}' bindtap='navigatorItem' data-id='{{id}}'>
        <image class="item-img" src="{{front_cover}}" mode="widthFix"></image>
          <view class="item-title-box">
            <p  class="item-title">{{title}}</p> 
          </view>
          <view class="name">    
            <text class="name-title"><text>￥</text>{{price}}</text>
            <view class="heart_" catchtap='collect' data-collect = "{{collect}}" data-id='{{id}}'>
              <image class="heart" src="../../images/collect_.png" wx:if="{{collect}}"  ></image>
              <image class="heart" src="../../images/collect.png" wx:else  ></image>
            </view>
          </view>
      </navigator>
    </view>

    </template>    

js部分见上一篇微信小程序开发之数据请求加载