title: Filter 过滤器 header: develop nav: framework

sidebar: view_filter

推荐使用功能更全的 SJS功能。Filter 功能将不再更新，请勿在s-if、s-for、template、自定义组件等标签中使用。

Filter 是小程序的过滤器，结合 SWAN 模板，可以构建出页面的结构。

说明：

  • Filter 文件命名方式为:模块名.filter.js;
  • Filter 通过 export default 方式对外暴露其内部的私有函数;
  • Filter 只能导出function函数;
  • Filter 函数不能作为组件的事件回调;
  • Filter 可以创建独立得模块，也可以通过内联的形式;
  • Filter 不支持全局变量;
  • 多个 filter 标签不能出现相同的 src 属性值， module 属性的值也是标识模块的唯一 id 。

Filter模块

filter代码有两种编写方式:

  • 可以编写在 swan 文件中的<filter></filter>标签内，直接在该swan文件中通过module.fn的形式进行方法调用，例如代码示例1；
  • 可以编写在以 .filter.js 为后缀名的文件内，在其它 swan 文件中通过filter标签的src进行引入，例如代码示例2。

每一个 .filter.js 文件和<filter></filter>标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

filter标签

标签可以是双闭合 <filter></filter> 或者单闭合 <filter/>，带有src属性的标签，过滤器代码要写到相应的文件里，不带有src属性的标签，过滤器代码写在标签内。

属性名 类型 说明
src String 引用 .filter.js 文件的相对路径。
module String 当前<filter></filter>标签的模块名,必填字段。

filter逻辑代码

filter逻辑代码使用export default的形式导出封装的一系列方法。

代码示例

  1. export default {
  2.     Foo: () => {
  3.         return 'swan-foo-filter';
  4.     },
  5.     Bar: () => {
  6.         return 'swan-bar-filter';
  7.     }
  8. }

filter内联渲染

代码示例1

  1. <!-- swan -->
  2. <view> {{swan.message()}} </view>
  3. <filter module="swan">
  4.     export default {
  5.         message: function() {
  6.             return 'Hello world';
  7.         }
  8.     }
  9. </filter>

页面输出：

  1. Hello world

数据处理示例

代码示例2 在开发者工具中预览效果

  1. // index.js
  2. Page({
  3.     data: {
  4.         array: [1, 3, 6, 8, 2, 0]
  5.     }
  6. });
  1. // index.filter.js
  2. export default {
  3.     maxin: arr => {
  4.         var max = undefined;
  5.         for (var i = 0; i < arr.length; ++i) {
  6.             max = max === undefined ?
  7.             arr[i] :
  8.             (max >= arr[i] ? max : arr[i]);
  9.         }
  10.         return max;
  11.     }
  12. };
  1. <!-- swan模板 -->
  2. <view>{{swan.maxin(array)}}</view>
  3. <filter src="./index.filter.js" module="swan"></filter>

页面输出：

  1. 8

注释

Filter 的注释与 swan 模板文件的注释方式相同。

代码示例

  1. <!-- <filter module="swan">
  2.     function Foo() {
  3.         return 'programer';
  4.     }
  6.     export default {
  7.         test: Foo
  8.     };
  9. </filter> -->

运算符 & 语句 & 数据类型 & 基础类库

Filter 支持 javascript 所有运算符、语句、数据类型和基础类库。