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