@wines/filterbar NPM

`@wines/filterbar`

FilterBar 筛选栏

筛选栏组件。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "wux-filterbar",
  "usingComponents": {
    "wux-filterbar": "@wines/filterbar"
  }
}

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">FilterBar</view>
		<view class="page__desc">筛选栏</view>
	</view>
	<view class="page__bd">
		<wux-filterbar
		 items="{{ items }}"
		 bind:change="onChange"
		 bind:open="onOpen"
		 bind:close="onClose"
		/>
		<view class="panel panel_access" catchtouchmove="{{ opened ? 'noop' : '' }}">
			<view class="panel__bd">
				<view
				 class="media-box media-box_appmsg"
				 hover-class="cell_active"
				 wx:for="{{ repos }}"
				 wx:key="index"
				>
					<view class="media-box__hd media-box__hd_in-appmsg">
						<image class="media-box__thumb" src="{{ item.owner.avatar_url }}" />
					</view>
					<view class="media-box__bd media-box__bd_in-appmsg">
						<view class="media-box__title">{{ item.name }}</view>
						<view class="media-box__desc">{{ item.description }}</view>
						<view class="media-box__info">
							<view class="media-box__info__meta">forks: {{ item.forks_count }}</view>
							<view class="media-box__info__meta">stars: {{ item.stargazers_count }}</view>
							<view class="media-box__info__meta">date: {{ item.date }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</view>

import './index.less';
import { FilterbarConfigItems, FilterBarOnChangeValue } from '@wines/filterbar';
const data: FilterbarConfigItems = [
  {
    type: 'radio',
    label: 'Updated',
    value: 'updated',
    checked: true,
    children: [
      {
        label: 'Recently updated',
        value: 'desc',
        checked: true, // 默认选中
      },
      {
        label: 'Least recently updated',
        value: 'asc',
      },
    ],
    groups: ['001'],
  },
  {
    type: 'text',
    label: 'Forks',
    value: 'forks',
    groups: ['002'],
  },
  {
    type: 'sort',
    label: 'Stars',
    value: 'stars',
    groups: ['003'],
  },
  {
    type: 'filter',
    label: '筛选',
    value: 'filter',
    checked: true,
    children: [
      {
        type: 'radio',
        label: 'Languages（单选）',
        value: 'language',
        children: [
          {
            label: 'JavaScript',
            value: 'javascript',
          },
          {
            label: 'HTML',
            value: 'html',
          },
          {
            label: 'CSS',
            value: 'css',
          },
          {
            label: 'TypeScript',
            value: 'typescript',
          },
        ],
      },
      {
        type: 'checkbox',
        label: 'Query（复选）',
        value: 'query',
        children: [
          {
            label: 'Angular',
            value: 'angular',
          },
          {
            label: 'Vue',
            value: 'vue',
          },
          {
            label: 'React',
            value: 'react',
            checked: true, // 默认选中
          },
          {
            label: 'Avalon',
            value: 'avalon',
          },
        ],
      },
      {
        type: 'checkbox',
        label: '配送方式',
        value: 'away',
        children: [
          {
            label: '京东配送',
            value: '1',
          },
          {
            label: '货到付款',
            value: '2',
          },
          {
            label: '仅看有货',
            value: '3',
          },
          {
            label: '促销',
            value: '4',
          },
          {
            label: '全球购',
            value: '5',
          },
          {
            label: 'PLUS专享价',
            value: '6',
          },
          {
            label: '新品',
            value: '7',
          },
          {
            label: '配送全球',
            value: '8',
          },
        ],
      },
      {
        type: 'radio',
        label: '性别',
        value: 'gander',
        children: [
          {
            label: '男',
            value: '0',
          },
          {
            label: '女',
            value: '1',
          },
          {
            label: '通用',
            value: '2',
          },
        ],
      },
      {
        type: 'checkbox',
        label: '闭合方式',
        value: 'closed_mode',
        children: [
          {
            label: '卡扣',
            value: '0',
          },
          {
            label: '拉链',
            value: '1',
          },
          {
            label: '其他',
            value: '2',
          },
        ],
      },
      {
        type: 'checkbox',
        label: '轮子种类',
        value: 'wheel_type',
        children: [
          {
            label: '万向轮',
            value: '0',
          },
          {
            label: '单向轮',
            value: '1',
          },
          {
            label: '飞机轮',
            value: '2',
          },
          {
            label: '其他',
            value: '3',
          },
        ],
      },
      {
        type: 'checkbox',
        label: '箱包硬度',
        value: 'wheel_type',
        children: [
          {
            label: '硬箱',
            value: '0',
          },
          {
            label: '软硬结合',
            value: '1',
          },
          {
            label: '软箱',
            value: '2',
          },
          {
            label: '其他',
            value: '3',
          },
        ],
      },
      {
        type: 'checkbox',
        label: '适用场景',
        value: 'wheel_type',
        children: [
          {
            label: '旅行',
            value: '0',
          },
          {
            label: '婚庆',
            value: '1',
          },
          {
            label: '出差',
            value: '2',
          },
          {
            label: '其他',
            value: '3',
          },
        ],
      },
    ],
    groups: ['001', '002', '003'],
  },
];
Page({
  data: {
    items: data,
  },
  onLoad() {
    this.getRepos();
  },
  onChange(e) {
    const { checkedItems, items, checkedValues } = e.detail as FilterBarOnChangeValue;
    const params: Record<string, unknown> = {};
    console.log(checkedItems, items, checkedValues);
    checkedItems.forEach((n) => {
      if (n.checked) {
        if (n.value === 'updated') {
          const selected = (n.children || [])
            .filter((n) => n.checked as boolean)
            .map((n) => n.value as string)
            .join(' ');
          params.sort = n.value;
          params.order = selected;
        } else if (n.value === 'stars') {
          params.sort = n.value;
          params.order = n.sort === 1 ? 'asc' : 'desc';
        } else if (n.value === 'forks') {
          params.sort = n.value;
        } else if (n.value === 'filter') {
          (n.children || [])
            .filter((n) => n.selected as string)
            .forEach((n) => {
              if (n.value === 'language') {
                const selected = (n.children || [])
                  .filter((n) => n.checked as boolean)
                  .map((n) => n.value as string)
                  .join(' ');
                params.language = selected;
              } else if (n.value === 'query') {
                const selected = (n.children || [])
                  .filter((n) => n.checked as boolean)
                  .map((n) => n.value as string)
                  .join(' ');
                params.query = selected;
              }
            });
        }
      }
    });

    console.log('params', params);
    this.getRepos(params);
  },
  getRepos(params: Record<string, unknown> = {}) {
    const language = (params.language || 'javascript') as string;
    const query = (params.query || 'react') as string;
    const q = `${query}+language:${language}`;
    const data = Object.assign(
      {
        q,
        order: 'desc',
      },
      params,
    );
    console.log(data);
    void wx.showLoading({ title: '加载中' });

    setTimeout(() => {
      const repos: unknown[] = [];
      for (let i = 0; i < 20; i++) {
        repos.push({
          owner: { avatar_url: 'https://cdn.skyvow.cn/logo.png' },
          name: 'wux-weapp',
          description: '一套组件化、可复用、易扩展的微信小程序 UI 组件库',
          forks_count: 4400,
          stargazers_count: 850,
          date: Date.now(),
        });
      }
      this.setData({ repos });
      void wx.hideLoading();
    }, 1500);
  },
  onOpen() {
    this.setData({ opened: true });
  },
  onClose() {
    this.setData({ opened: false });
  },
  /**
   * 阻止触摸移动
   */
  noop() {
    /** */
  },
});

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`	所属分组	[]
menuBarHeight	`number`	考虑安全区域, type=filter的时候是否有原生HeaderMenuBar, 如果没有header Menubar 考虑设置为0	32
confirmText	`string`	确定按钮的文字	确定
cancelText	`string`	取消按钮的文字	重置
bind:change	`function`	change 事件触发的回调函数	-
bind:scroll	`function`	scroll 事件触发的回调函数	-
bind:open	`function`	打开 select 或 filter 时触发的回调函数	-
bind:close	`function`	关闭 select 或 filter 时触发的回调函数	-