• Filter 过滤器
  • 说明
  • Filter 模块
  • filter 标签
  • filter 逻辑代码
  • filter 内联渲染
  • 数据处理示例
  • 注释
  • 运算符 & 语句 & 数据类型 & 基础类库
• 常见问题
  • Q：filter 是否支持三目运算？

Filter 过滤器

推荐使用功能更全的 SJS 功能。Filter 功能将不再更新，请勿在s-if、s-for、template、自定义组件等标签中使用。
Filter 是小程序的过滤器，结合 SWAN 模板，可以构建出页面的结构。

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都做网站、成都网站建设、仁布网络推广、重庆小程序开发、仁布网络营销、仁布企业策划、仁布品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供仁布建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

说明

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

Filter 模块

filter 代码有两种编写方式：

• 可以编写在 swan 文件中的标签内，直接在该 swan 文件中通过module.fn的形式进行方法调用，例如代码示例 1；
• 可以编写在以 .filter.js 为后缀名的文件内，在其它 swan 文件中通过filter标签的 src 进行引入，例如代码示例 2。
  每一个 .filter.js 文件和标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

filter 标签

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

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

filter 逻辑代码

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

• JS

 
 
 

  
  
  
export default {
  
  
  
 Foo: () => {
  
  
  
 return 'swan-foo-filter';
  
  
  
 },
  
  
  
 Bar: () => {
  
  
  
 return 'swan-bar-filter';
  
  
  
 }
  
  
  
}
 
 
 

filter 内联渲染

代码示例 1

• SWAN

 
 
 

  
  
  

  
  
  
 {{swan.message()}} 
  
  
  

  
  
  
 export default {
  
  
  
 message: function() {
  
  
  
 return 'Hello world';
  
  
  
 }
  
  
  
 }
  
  
  

 
 
 

页面输出：

 
 
 

  
  
  
Hello world
 
 
 

数据处理示例

代码示例 2

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• JS
• SWAN

 
 
 

  
  
  
// index.js
  
  
  
Page({
  
  
  
 data: {
  
  
  
 array: [1, 3, 6, 8, 2, 0]
  
  
  
 }
  
  
  
});
  
  
  
// index.filter.js
  
  
  
export default {
  
  
  
 maxin: arr => {
  
  
  
 var max = undefined;
  
  
  
 for (var i = 0; i < arr.length; ++i) {
  
  
  
 max = max === undefined ?
  
  
  
 arr[i] :
  
  
  
 (max >= arr[i] ? max : arr[i]);
  
  
  
 }
  
  
  
 return max;
  
  
  
 }
  
  
  
};
 
 
 

 
 
 

  
  
  

  
  
  
{{swan.maxin(array)}}
  
  
  

 
 
 

页面输出：

 
 
 

  
  
  
8
 
 
 

注释

Filter 的注释与 swan 模板文件的注释方式相同。
代码示例

• SWAN

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

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

常见问题

Q：filter 是否支持三目运算？

A：不支持。

文章标题：创新互联百度小程序教程：Filter过滤器
链接地址：http://cdbrznjsb.com/article/cdceegi.html