今天继续学习了微信开发者工具中Java.script的简单函数。以之前的文章所作的首页开发为基础，在页面上新增过滤筛选的功能，即设置按钮，通过点击按钮可以将免费观看的视频和会员播放的视频分离出来。

首先，在页面的顶端设置两个小按钮，即<button size=mini>XXX</button>。这两个按钮就是联系.wxml和.js的桥梁，小程序可以通过这两个按钮和用户进行互动。

第二步，就是设置相应的按钮功能，也即我们要对函数进行设计。首先在.js中添加相关的函数，函数格式： 函数名：function（数据类型）{函数内容} 。添加完函数后，在.wxml中添加相应的关联，即<button bindtap=“函数名” size=mini>XXX</button>，我们可以通过在.js中利用console.log（）来检验按钮和函数的关系是否已经建立起来。由于我做的是在视频堆里筛选视频，那就必须要用循环语句和条件判断语句，具体代码如下：

这个时候，我们再点击“会员看”按钮，就能筛选出来会员看的视频，效果如图：

由于我在前面写.wxss的时候flex用的是space-around，所以最后一行单个视频的时候就会出现单个居中的情况。如果使用space—between就可以便面这种情况，但是它只保证了子盒子之间的距离，还要自己设置子盒子和父容器边框的距离。

同理，对免费播放的视频也同样处理即可。如图

代码： 效果图：

这里的this指的是对象本身，即data；

观察上面的两个筛选函数，不难发现，它们的结构都是一样的，只是某些参数以及判定条件不一样，这个时候我们就可以设置一个新的函数体，具有大体的结构，通过传输过来的数据类型选择不同的判定条件。那么在筛选的时候，只需要对其进行调用就可以了。新函数设计的大概思路和上述相同，不一样的是要增添对数据类型的判断进而选择不同的条件判断，由于我们这里只有两种数据类型，一个是“会员”，另一个是“免费”，所以我们这里可以偷偷懒只设置一个数据类型，另外一个不设置也相当于一个“空数据类型”，如果有多个类型设置多个数据类型即可，实际代码如图：

这样就已经设置好筛选的功能了，但是在实践中，我发现这个按钮是一次性的，也就是说，你点了“会员播放”后，虽然会显示会员播放的视频，但是你再点“免费播放”是没有反应的，我觉得应该是因为函数已经改变了数组元素的缘故，所以数组中就没了price==0的元素，还得靠以后的深入学习继续完善该小程序的功能，希望有一天它真的能变成一个小程序，而不仅仅是一个前端首页的排版。

希望能对也是正在学习微信小程序的小伙伴有帮助。