FilterBar 筛选栏

筛选栏组件。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "FilterBar",
  3.     "usingComponents": {
  4.         "wux-filterbar": "../../dist/filterbar/index"
  5.     }
  6. }

示例

  1. <view class="page" style="{{ pageStyle }}">
  2.     <view class="page__hd">
  3.         <view class="page__title">FilterBar</view>
  4.         <view class="page__desc">筛选栏</view>
  5.     </view>
  6.     <view class="page__bd">
  7.         <wux-filterbar items="{{ items }}" bind:change="onChange" bind:open="onOpen" bind:close="onClose" />
  8.         <view class="weui-panel weui-panel_access">
  9.             <view class="weui-panel__bd">
  10.                 <view class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active" wx:for="{{ repos }}" wx:key="">
  11.                     <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
  12.                         <image class="weui-media-box__thumb" src="{{ item.owner.avatar_url }}" />
  13.                     </view>
  14.                     <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
  15.                         <view class="weui-media-box__title">{{ item.name }}</view>
  16.                         <view class="weui-media-box__desc">{{ item.description }}</view>
  17.                         <view class="weui-media-box__info">
  18.                             <view class="weui-media-box__info__meta">forks: {{ item.forks_count }}</view>
  19.                             <view class="weui-media-box__info__meta">stars: {{ item.stargazers_count }}</view>
  20.                             <view class="weui-media-box__info__meta">date: {{ item.date }}</view>
  21.                         </view>
  22.                     </view>
  23.                 </view>
  24.             </view>
  25.         </view>
  26.     </view>
  27. </view>
  1. Page({
  2.     data: {
  3.         items: [{
  4.                 type: 'radio',
  5.                 label: 'Updated',
  6.                 value: 'updated',
  7.                 children: [{
  8.                         label: 'Recently updated',
  9.                         value: 'desc',
  10.                     },
  11.                     {
  12.                         label: 'Least recently updated',
  13.                         value: 'asc',
  14.                     },
  15.                 ],
  16.                 groups: ['001'],
  17.             },
  18.             {
  19.                 type: 'text',
  20.                 label: 'Forks',
  21.                 value: 'forks',
  22.                 groups: ['002'],
  23.             },
  24.             {
  25.                 type: 'sort',
  26.                 label: 'Stars',
  27.                 value: 'stars',
  28.                 groups: ['003'],
  29.             },
  30.             {
  31.                 type: 'filter',
  32.                 label: '筛选',
  33.                 value: 'filter',
  34.                 children: [{
  35.                         type: 'radio',
  36.                         label: 'Languages（单选）',
  37.                         value: 'language',
  38.                         children: [{
  39.                                 label: 'JavaScript',
  40.                                 value: 'javascript',
  41.                             },
  42.                             {
  43.                                 label: 'HTML',
  44.                                 value: 'html',
  45.                             },
  46.                             {
  47.                                 label: 'CSS',
  48.                                 value: 'css',
  49.                             },
  50.                             {
  51.                                 label: 'TypeScript',
  52.                                 value: 'typescript',
  53.                             },
  54.                         ],
  55.                     },
  56.                     {
  57.                         type: 'checkbox',
  58.                         label: 'Query（复选）',
  59.                         value: 'query',
  60.                         children: [{
  61.                                 label: 'Angular',
  62.                                 value: 'angular',
  63.                             },
  64.                             {
  65.                                 label: 'Vue',
  66.                                 value: 'vue',
  67.                             },
  68.                             {
  69.                                 label: 'React',
  70.                                 value: 'react',
  71.                             },
  72.                             {
  73.                                 label: 'Avalon',
  74.                                 value: 'avalon',
  75.                             },
  76.                         ],
  77.                     },
  78.                     {
  79.                         type: 'checkbox',
  80.                         label: '配送方式',
  81.                         value: 'away',
  82.                         children: [{
  83.                                 label: '京东配送',
  84.                                 value: '1',
  85.                             },
  86.                             {
  87.                                 label: '货到付款',
  88.                                 value: '2',
  89.                             },
  90.                             {
  91.                                 label: '仅看有货',
  92.                                 value: '3',
  93.                             },
  94.                             {
  95.                                 label: '促销',
  96.                                 value: '4',
  97.                             },
  98.                             {
  99.                                 label: '全球购',
  100.                                 value: '5',
  101.                             },
  102.                             {
  103.                                 label: 'PLUS专享价',
  104.                                 value: '6',
  105.                             },
  106.                             {
  107.                                 label: '新品',
  108.                                 value: '7',
  109.                             },
  110.                             {
  111.                                 label: '配送全球',
  112.                                 value: '8',
  113.                             },
  114.                         ],
  115.                     },
  116.                     {
  117.                         type: 'radio',
  118.                         label: '性别',
  119.                         value: 'gander',
  120.                         children: [{
  121.                                 label: '男',
  122.                                 value: '0',
  123.                             },
  124.                             {
  125.                                 label: '女',
  126.                                 value: '1',
  127.                             },
  128.                             {
  129.                                 label: '通用',
  130.                                 value: '2',
  131.                             },
  132.                         ],
  133.                     },
  134.                     {
  135.                         type: 'checkbox',
  136.                         label: '闭合方式',
  137.                         value: 'closed_mode',
  138.                         children: [{
  139.                                 label: '卡扣',
  140.                                 value: '0',
  141.                             },
  142.                             {
  143.                                 label: '拉链',
  144.                                 value: '1',
  145.                             },
  146.                             {
  147.                                 label: '其他',
  148.                                 value: '2',
  149.                             },
  150.                         ],
  151.                     },
  152.                     {
  153.                         type: 'checkbox',
  154.                         label: '轮子种类',
  155.                         value: 'wheel_type',
  156.                         children: [{
  157.                                 label: '万向轮',
  158.                                 value: '0',
  159.                             },
  160.                             {
  161.                                 label: '单向轮',
  162.                                 value: '1',
  163.                             },
  164.                             {
  165.                                 label: '飞机轮',
  166.                                 value: '2',
  167.                             },
  168.                             {
  169.                                 label: '其他',
  170.                                 value: '3',
  171.                             },
  172.                         ],
  173.                     },
  174.                     {
  175.                         type: 'checkbox',
  176.                         label: '箱包硬度',
  177.                         value: 'wheel_type',
  178.                         children: [{
  179.                                 label: '硬箱',
  180.                                 value: '0',
  181.                             },
  182.                             {
  183.                                 label: '软硬结合',
  184.                                 value: '1',
  185.                             },
  186.                             {
  187.                                 label: '软箱',
  188.                                 value: '2',
  189.                             },
  190.                             {
  191.                                 label: '其他',
  192.                                 value: '3',
  193.                             },
  194.                         ],
  195.                     },
  196.                     {
  197.                         type: 'checkbox',
  198.                         label: '适用场景',
  199.                         value: 'wheel_type',
  200.                         children: [{
  201.                                 label: '旅行',
  202.                                 value: '0',
  203.                             },
  204.                             {
  205.                                 label: '婚庆',
  206.                                 value: '1',
  207.                             },
  208.                             {
  209.                                 label: '出差',
  210.                                 value: '2',
  211.                             },
  212.                             {
  213.                                 label: '其他',
  214.                                 value: '3',
  215.                             },
  216.                         ],
  217.                     },
  218.                 ],
  219.                 groups: ['001', '002', '003'],
  220.             },
  221.         ],
  222.     },
  223.     onLoad() {
  224.         this.getRepos()
  225.     },
  226.     onChange(e) {
  227.         const { checkedItems, items } = e.detail
  228.         const params = {}
  230.         console.log(checkedItems, items)
  232.         checkedItems.forEach((n) => {
  233.             if (n.checked) {
  234.                 if (n.value === 'updated') {
  235.                     const selected = n.children.filter((n) => n.checked).map((n) => n.value).join(' ')
  236.                     params.sort = n.value
  237.                     params.order = selected
  238.                 } else if (n.value === 'stars') {
  239.                     params.sort = n.value
  240.                     params.order = n.sort === 1 ? 'asc' : 'desc'
  241.                 } else if (n.value === 'forks') {
  242.                     params.sort = n.value
  243.                 } else if (n.value === 'filter') {
  244.                     n.children.filter((n) => n.selected).forEach((n) => {
  245.                         if (n.value === 'language') {
  246.                             const selected = n.children.filter((n) => n.checked).map((n) => n.value).join(' ')
  247.                             params.language = selected
  248.                         } else if (n.value === 'query') {
  249.                             const selected = n.children.filter((n) => n.checked).map((n) => n.value).join(' ')
  250.                             params.query = selected
  251.                         }
  252.                     })
  253.                 }
  254.             }
  255.         })
  257.         this.getRepos(params)
  258.     },
  259.     getRepos(params = {}) {
  260.         const language = params.language || 'javascript'
  261.         const query = params.query || 'react'
  262.         const q = `${query}+language:${language}`
  263.         const data = Object.assign({
  264.             q,
  265.         }, params)
  267.         wx.showLoading()
  268.         wx.request({
  269.             url: `https://api.github.com/search/repositories`,
  270.             data,
  271.             success: (res) => {
  272.                 console.log(res)
  274.                 wx.hideLoading()
  276.                 this.setData({
  277.                     repos: res.data.items.map((n) => Object.assign({}, n, {
  278.                         date: n.created_at.substr(0, 7),
  279.                     })),
  280.                 })
  281.             },
  282.         })
  283.     },
  284.     onOpen(e) {
  285.         this.setData({
  286.             pageStyle: 'height: 100%; overflow: hidden',
  287.         })
  288.     },
  289.     onClose(e) {
  290.         this.setData({
  291.             pageStyle: '',
  292.         })
  293.     },
  294. })

视频演示

FilterBar

API

FilterBar props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-filterbar
items array 组件子元素 []
items[].type string 子元素类型，可选值为：radio、text、checkbox、sort、filter -
items[].label string 描述 -
items[].value string 唯一值 -
items[].children array 子元素 []
items[].groups array 所属分组 []
bind:change function change 事件触发的回调函数 -
bind:scroll function scroll 事件触发的回调函数 -
bind:open function 打开 select 或 filter 时触发的回调函数 -
bind:close function 关闭 select 或 filter 时触发的回调函数 -

FilterBar externalClasses

名称 描述
wux-class 根节点样式类