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 = {}
  229. console.log(checkedItems, items)
  230. checkedItems.forEach((n) => {
  231. if (n.checked) {
  232. if (n.value === 'updated') {
  233. const selected = n.children.filter((n) => n.checked).map((n) => n.value).join(' ')
  234. params.sort = n.value
  235. params.order = selected
  236. } else if (n.value === 'stars') {
  237. params.sort = n.value
  238. params.order = n.sort === 1 ? 'asc' : 'desc'
  239. } else if (n.value === 'forks') {
  240. params.sort = n.value
  241. } else if (n.value === 'filter') {
  242. n.children.filter((n) => n.selected).forEach((n) => {
  243. if (n.value === 'language') {
  244. const selected = n.children.filter((n) => n.checked).map((n) => n.value).join(' ')
  245. params.language = selected
  246. } else if (n.value === 'query') {
  247. const selected = n.children.filter((n) => n.checked).map((n) => n.value).join(' ')
  248. params.query = selected
  249. }
  250. })
  251. }
  252. }
  253. })
  254. this.getRepos(params)
  255. },
  256. getRepos(params = {}) {
  257. const language = params.language || 'javascript'
  258. const query = params.query || 'react'
  259. const q = `${query}+language:${language}`
  260. const data = Object.assign({
  261. q,
  262. }, params)
  263. wx.showLoading()
  264. wx.request({
  265. url: `https://api.github.com/search/repositories`,
  266. data,
  267. success: (res) => {
  268. console.log(res)
  269. wx.hideLoading()
  270. this.setData({
  271. repos: res.data.items.map((n) => Object.assign({}, n, {
  272. date: n.created_at.substr(0, 7),
  273. })),
  274. })
  275. },
  276. })
  277. },
  278. onOpen(e) {
  279. this.setData({
  280. pageStyle: 'height: 100%; overflow: hidden',
  281. })
  282. },
  283. onClose(e) {
  284. this.setData({
  285. pageStyle: '',
  286. })
  287. },
  288. })

视频演示

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 根节点样式类