《微信小程序模仿开眼视频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/navigatorscroll-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^