• Filter 過濾器
  • 說明
  • Filter 模塊
  • filter 標(biāo)簽
  • filter 邏輯代碼
  • filter 內(nèi)聯(lián)渲染
  • 數(shù)據(jù)處理示例
  • 注釋
  • 運(yùn)算符 & 語句 & 數(shù)據(jù)類型 & 基礎(chǔ)類庫
• 常見問題
  • Q：filter 是否支持三目運(yùn)算？

Filter 過濾器

推薦使用功能更全的 SJS 功能。Filter 功能將不再更新，請(qǐng)勿在s-if、s-for、template、自定義組件等標(biāo)簽中使用。
Filter 是小程序的過濾器，結(jié)合 SWAN 模板，可以構(gòu)建出頁面的結(jié)構(gòu)。

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站建設(shè)、仁布網(wǎng)絡(luò)推廣、重慶小程序開發(fā)、仁布網(wǎng)絡(luò)營銷、仁布企業(yè)策劃、仁布品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供仁布建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

說明

• Filter 文件命名方式為：模塊名 .filter.js ；
• Filter 通過 export default 方式對(duì)外暴露其內(nèi)部的私有函數(shù)；
• Filter 只能導(dǎo)出 function 函數(shù)；
• Filter 函數(shù)不能作為組件的事件回調(diào)；
• Filter 可以創(chuàng)建獨(dú)立得模塊，也可以通過內(nèi)聯(lián)的形式；
• Filter 不支持全局變量；
• 多個(gè) filter 標(biāo)簽不能出現(xiàn)相同的 src 屬性值， module 屬性的值也是標(biāo)識(shí)模塊的唯一 id 。

Filter 模塊

filter 代碼有兩種編寫方式：

• 可以編寫在 swan 文件中的標(biāo)簽內(nèi)，直接在該 swan 文件中通過module.fn的形式進(jìn)行方法調(diào)用，例如代碼示例 1；
• 可以編寫在以 .filter.js 為后綴名的文件內(nèi)，在其它 swan 文件中通過filter標(biāo)簽的 src 進(jìn)行引入，例如代碼示例 2。
  每一個(gè) .filter.js 文件和標(biāo)簽都是一個(gè)單獨(dú)的模塊。每個(gè)模塊都有自己獨(dú)立的作用域。即在一個(gè)模塊里面定義的變量與函數(shù)，默認(rèn)為私有的，對(duì)其他模塊不可見。

filter 標(biāo)簽

標(biāo)簽可以是雙閉合 或者單閉合 ，帶有 src 屬性的標(biāo)簽，過濾器代碼要寫到相應(yīng)的文件里，不帶有 src 屬性的標(biāo)簽，過濾器代碼寫在標(biāo)簽內(nèi)。

屬性名	類型	說明
src	String	引用 .filter.js 文件的相對(duì)路徑
module	String	當(dāng)前標(biāo)簽的模塊名，必填字段

filter 邏輯代碼

filter 邏輯代碼使用export default的形式導(dǎo)出封裝的一系列方法。
代碼示例

• JS

 
 
 

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

filter 內(nèi)聯(lián)渲染

代碼示例 1

• SWAN

 
 
 

  
  
  

  
  
  
 {{swan.message()}} 
  
  
  

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

 
 
 

頁面輸出：

 
 
 

  
  
  
Hello world
 
 
 

數(shù)據(jù)處理示例

代碼示例 2

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 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

運(yùn)算符 & 語句 & 數(shù)據(jù)類型 & 基礎(chǔ)類庫

Filter 支持 javascript 所有運(yùn)算符、語句、數(shù)據(jù)類型和基礎(chǔ)類庫。

常見問題

Q：filter 是否支持三目運(yùn)算？

A：不支持。

標(biāo)題名稱：創(chuàng)新互聯(lián)百度小程序教程：Filter過濾器
網(wǎng)頁路徑：http://www.5511xx.com/article/cdceegi.html