新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)百度小程序教程：Filter過濾器

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

Filter 過濾器

推薦使用功能更全的 SJS 功能。Filter 功能將不再更新，請勿在s-if、s-for、template、自定義組件等標簽中使用。
Filter 是小程序的過濾器，結(jié)合 SWAN 模板，可以構(gòu)建出頁面的結(jié)構(gòu)。
成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于成都做網(wǎng)站、成都網(wǎng)站建設、仁布網(wǎng)絡推廣、重慶小程序開發(fā)、仁布網(wǎng)絡營銷、仁布企業(yè)策劃、仁布品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供仁布建站搭建服務，24小時服務熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

說明

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

Filter 模塊

filter 代碼有兩種編寫方式：

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

filter 標簽

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

屬性名	類型	說明
src	String	引用 .filter.js 文件的相對路徑
module	String	當前標簽的模塊名，必填字段

filter 邏輯代碼

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

 
 
 
  
  
  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ā)者工具中打開

在 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)}}

頁面輸出：

注釋

Filter 的注釋與 swan 模板文件的注釋方式相同。
代碼示例

SWAN

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

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

常見問題

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

A：不支持。

新聞名稱：創(chuàng)新互聯(lián)百度小程序教程：Filter過濾器
URL地址：http://m.fisionsoft.com.cn/article/cdceegi.html