微信小程序模仿开眼视频app（三）——信息卡片瀑布流和分类

《微信小程序模仿开眼视频app（一）——视频首页、视频详情、分类》

《微信小程序模仿开眼视频app（二）——搜索功能》

可到我的github账号上去copy文件

瀑布流部分

文件代码提示的挺详细的，这里主要点一下

• 社区与分类：页面左右滑动可自由切换，导航条下划线也会动态变化，用的是swiper标签，可具体查看微信官方解释文档，

只需要导航条下划线的index属型与swiper的index同步即可

• 瀑布流：用的外部api：https://api.apiopen.top/musicBroadcasting

他会截取到40条与图片相关的信息，但是需要修改一些属型，换成用户信息卡需要的内容，当然了，如果你有自己的api就更好了，不需要那么麻烦。

然后在wxml中设置成两列，按index奇偶排序，奇数在左，偶数在右，可以弄成参差排序。只要图片彼此高度相差不大以及提前点开启下拉刷新功能，应该‘看起来’还是算瀑布流吧（心虚`-`\\\）

网上有个方法是用

column-count: 2;

来弄，刚开始我也是这样弄，很方便，但是后续便会发现它的排列情况是按左列排满后再往右接着排，而不是一行排完接着下一行，如果有下拉刷新增加新内容的话...是的，你应该已经发现问题了。

我之前还想着直接算出左右两列的高度，然后对比，谁短就把下一信息卡插进去，因为微信有提供节点信息接口，可以获取到节点的高度，但是它会受css布局的影响（具体规则我也不大清楚……），我操作的时候有些节点能获取到，有些则不然。而且还不准……总之试验了很多次，还是放弃这个方法了

• 下拉刷新：打包好加载数据函数loadData（），每次scrollToLower就调用该函数

分类部分

分类主要也是数据的重复排布，所以想到了或许可以用json来保存数据；

但是在查阅一些资料后，发现微信小程序自带的wxs好像也可以实现，就想着试试

//在utils/categoryData.wxs中
var list = [
  {
    id: '1',
    MTID: 'MT001',
    category: '#广告',
    imageAddress: '../../images/4.jpg',
  },
  {
    id: '2',
    MTID: 'MT002',
    category: '#生活',
    imageAddress: '../../images/4.jpg',
  },
  {
    id: '3',
    MTID: 'MT003',
    category: '#动画',
    imageAddress: '../../images/4.jpg',
  },
  {
    id: '4',
    MTID: 'MT004',
    category: '#搞笑',
    imageAddress: '../../images/4.jpg',
  },
  {
    id: '5',
    MTID: 'MT005',
    category: '#开胃',
    imageAddress: '../../images/4.jpg',
  },
  {
    id: '6',
    MTID: 'MT006',
    category: '#创意',
    imageAddress: '../../images/4.jpg',
  },
  {
    id: '7',
    MTID: 'MT007',
    category: '#运动',
    imageAddress: '../../images/4.jpg',
  },
  {
    id: '8',
    MTID: 'MT008',
    category: '#音乐',
    imageAddress: '../../images/4.jpg',
  },
  {
    id: '9',
    MTID: 'MT009',
    category: '#萌宠',
    imageAddress: '../../images/4.jpg',
  },
];

module.exports = {
  list: list,
}

在wxml中排版

<!-->
 WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。-->
<wxs src='../../utils/categoryData.wxs' module="tools" />

<navigator class='searchPalce' url="../search/search">
  <image src='../../images/search.png' class='searchIcon'></image>
</navigator>
<scroll-view class="body" scroll-y="true">
  <view class="item" wx:for="{{tools.list}}">
    <view class='cover'>
      <image src="{{item.imageAddress}}" mode='scaleToFill' class='pic'></image>
    </view>
    <text class="intro">{{item.category}}</text>
  </view>
</scroll-view>

 

好的，总结完毕，有问题就轰炸我吧^u^