日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間:8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
創(chuàng)新互聯(lián)百度小程序教程:filter篩選
  • filter 篩選
    • 屬性說(shuō)明
      • selections 中的 type 有效值
    • 示例
      • 代碼示例
      • 數(shù)據(jù)示例

    filter 篩選

    解釋:篩選,由篩選頭部(filter-header)以及篩選面板(filter-body)組成,其中篩選面板支持單列篩選、級(jí)聯(lián)篩選、多項(xiàng)選擇篩選以及自定義篩選。

    欽南網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,欽南網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為欽南近千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢(qián),請(qǐng)找那個(gè)售后服務(wù)好的欽南做網(wǎng)站的公司定做!

    屬性說(shuō)明

    屬性名 類型 必填 默認(rèn)值 說(shuō)明

    filterId

    String

    篩選組件的唯一標(biāo)示

    selections

    String

    篩選項(xiàng)內(nèi)容數(shù)組,數(shù)組格式為:
    [{
    ??text: ‘名稱’,
    ??value: ‘值’,
    ??type: ‘single’/‘cascade’/‘checkbox-group’/‘custom’,
    ??options: [{
    ????????text: ‘’,
    ????????value: ‘’,
    ????????highlight: false,
    ????????textWidth: 100
    ?????}]
    }]
    highlight: false表示選中后,篩選頭部不高亮顯示;
    textWidth: 100表示篩選頭部寬度為 100px

    value

    String/Number/Array

    選中項(xiàng)的值

    border

    Boolean

    true

    篩選器頭部(filter-header)是否帶有下邊線

    fontColor

    String

    #000

    篩選器頭部(filter-header)默認(rèn)狀態(tài)下的文字顏色

    iconColor

    String

    #000

    篩選器頭部(filter-header)默認(rèn)狀態(tài)下的 icon 顏色

    activeColor

    String

    #2772fb

    篩選器選中時(shí)篩選頭部(filter-header)以及篩選面板(filter-body)icon 顏色

    disColor

    String

    #666

    篩選器選中時(shí)篩選頭部(filter-header)配置不高亮(highlight: false)時(shí)的文字和 icon 顏色

    filter-header-class

    String

    篩選組件頭部的外部樣式類,可用于修改整個(gè)頭部的最外層樣式

    filter-btn-class

    String

    篩選組件頭部的外部樣式類,可用于修改某個(gè)頭部按鈕的樣式

    filter-btn-text-class

    String

    篩選組件頭部的外部樣式類,可用于修改某個(gè)頭部的文字樣式

    filter-body-class

    String

    篩選組件展開(kāi)時(shí)篩選面板(filter-body)外部樣式類,可用于修改篩選面板的最外層樣式

    bindselect

    EventHandle

    更改篩選面板中內(nèi)容時(shí)觸發(fā),可用于獲取組件選中的內(nèi)容

    bindexpand

    EventHandle

    點(diǎn)擊篩選頭部或者篩選面板關(guān)閉時(shí)觸發(fā),可用于獲取篩選面板收起 / 展開(kāi)狀態(tài)

    selections 中的 type 有效值

    說(shuō)明
    single默認(rèn)值,篩選組件展開(kāi)后為單列面板
    cascade篩選組件展開(kāi)后為篩選面板為級(jí)聯(lián)面板,tips:篩選組件目前最多支持 3 級(jí)
    options 格式為:[{
    ??text: ‘’,
    ??value: ‘’,
    ??children: [{
    ???text: ‘’,
    ???value: ‘’
    ??}]
    }]
    checkbox-group篩選組件展開(kāi)后為多選面板。需要修改多選面板樣式,可以在 selections 中增加 column、itemStyle 等配置,可參考 checkbox-group 組件
    custom篩選組件展開(kāi)后為自定義面板。如果你想要自定義篩選面板,則 selections 需要增加 slot ,如:slot=custom

    type 為 single 時(shí)的樣式

    屬性名 類型 必填 默認(rèn)值 說(shuō)明
    filter-singlelist-classString單列篩選外部樣式類,可用于修改單列篩選組件最外層樣式
    filter-singlelist-item-classString單列篩選外部樣式類,可用于修改單列篩選組件中每一項(xiàng)展開(kāi)元素的樣式
    filter-singlelist-item-text-classString單列篩選外部樣式類,可用于修改單列篩選組件中每一項(xiàng)展開(kāi)元素的文字樣式

    type 為 cascade 時(shí)的樣式

    屬性名 類型 必填 默認(rèn)值 說(shuō)明
    filter-cascade-classString級(jí)聯(lián)篩選外部樣式類,可用戶修改級(jí)聯(lián)篩選組件最外層樣式
    filter-cascade-column-classString級(jí)聯(lián)篩選組件外部樣式類,可用戶修改組件展開(kāi)面板中,某一列的樣式
    filter-cascade-column-item-classString級(jí)聯(lián)篩選組件外部樣式類,可用戶修改組件展開(kāi)面板中,某一列中某一項(xiàng)的樣式
    filter-cascade-column-item-text-classString級(jí)聯(lián)篩選組件外部樣式類,可用戶修改組件展開(kāi)面板中,某一列中某一項(xiàng)的文字的樣式

    type 為 checkbox-group 時(shí)的樣式

    屬性名 類型 必填 默認(rèn)值 說(shuō)明
    activeTextColorString#2772fb篩選面板(filter-body)為多項(xiàng)選擇篩選時(shí)選中時(shí)的文字顏色
    activeIconColorString#2772fb篩選面板(filter-body)為多項(xiàng)選擇篩選時(shí)選中時(shí)的 icon 顏色
    activeBgColorString#2772fb篩選面板(filter-body)為多項(xiàng)選擇篩選時(shí)選中時(shí)的背景顏色
    filter-checkbox-group-classString多項(xiàng)篩選組件外部樣式類,可用于修改組件最外層樣式
    checkbox-group-classString多項(xiàng)組件的外部樣式類,可用于修改組件展開(kāi)的多項(xiàng)選擇面板樣式

    示例

    跳轉(zhuǎn)編輯工具

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

    在 WEB IDE 中打開(kāi)

    掃碼體驗(yàn)

    代碼示例

    請(qǐng)使用百度APP掃碼

    代碼示例

    • SWAN
    • JS
    • CSS
    • JSON
     
     
     
    1. {{item.title}}
    2. border="{{false}}"
    3. font-color="{{item.fontColor}}"
    4. icon-color="{{item.iconColor}}"
    5. selections="{{item.selections}}"
    6. filter-id="{{index + 1}}"
    7. />
    8. {{item.title}}
    9. data-index="{{index}}"
    10. selections="{{item.selections}}"
    11. bind:select="selHdl"
    12. bind:expand="expandHdl"
    13. filter-id="{{index + 6}}"
    14. />
    15. s-if="item.type === 'custom'"
    16. class="{{item.class || 'filter-body'}}"
    17. filter-id="{{index + 6}}"
    18. selections="{{item.selections}}">
    19. s-if="customData[item].label"
    20. class="custom-content-label">{{customData[item].label}}
    21. s-if="customData[item].type === 'checkbox-group'"
    22. checkbox-group-class="filter-checkbox-group"
    23. column="{{customData[item].column}}"
    24. options="{{customData[item].options}}"
    25. value="{{customData[item].value}}"
    26. data-key="{{item}}"
    27. itemStyle="{{customData[item].itemStyle}}"
    28. bind:change="changeHdl"
    29. />
    30. class="btn reset"
    31. type="default"
    32. bindtap="resetHdl"
    33. disabled="{{resetDisabled}}"
    34. >重置
    35. class="btn submit"
    36. type="primary"
    37. bindtap="ensureHdl"
    38. >確定
    39. s-else
    40. class="{{item.class || 'filter-body'}}"
    41. checkbox-group-class="filter-checkbox-group"
    42. filter-id="{{index + 6}}"
    43. selections="{{item.selections}}"
    44. />
    45. 將數(shù)據(jù)“上海市”回填到篩選器一中,數(shù)據(jù)“東廠社區(qū)”回填到篩選器三中

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

    • JS
     
     
     
    1. import {upx2rpx} from '@smt-ui/component/src/common/utils/px';
    2. // 篩選頭部數(shù)據(jù)
    3. export const headerArray = [
    4. {
    5. title: '單個(gè)篩選',
    6. selections: [
    7. {
    8. text: '篩選器一',
    9. value: '1'
    10. }
    11. ]
    12. },
    13. {
    14. title: '兩個(gè)篩選',
    15. selections: [
    16. {
    17. text: '篩選器一',
    18. value: '1'
    19. },
    20. {
    21. text: '篩選器二',
    22. value: '2'
    23. }
    24. ]
    25. },
    26. {
    27. title: '三個(gè)篩選',
    28. selections: [
    29. {
    30. text: '篩選器一',
    31. value: '1'
    32. },
    33. {
    34. text: '篩選器二',
    35. value: '2'
    36. },
    37. {
    38. text: '篩選器三',
    39. value: '3'
    40. }
    41. ]
    42. },
    43. {
    44. title: '四個(gè)篩選',
    45. selections: [
    46. {
    47. text: '篩選器超過(guò)四個(gè)字打點(diǎn)',
    48. value: '1'
    49. },
    50. {
    51. text: '篩選器二',
    52. value: '2'
    53. },
    54. {
    55. text: '篩選器三',
    56. value: '3'
    57. },
    58. {
    59. text: '篩選器四',
    60. value: '4'
    61. }
    62. ]
    63. },
    64. {
    65. title: '自定義樣式',
    66. fontColor: '#2772fb',
    67. iconColor: '#2772fb',
    68. selections: [
    69. {
    70. text: '最多支持8個(gè)字超過(guò)打點(diǎn)',
    71. textWidth: 386
    72. }
    73. ]
    74. }
    75. ];
    76. // 級(jí)聯(lián)篩選第一列數(shù)據(jù)
    77. const cascadeFirstOptions = [
    78. {
    79. text: '全部所在地區(qū)',
    80. value: 'all',
    81. children: [
    82. {
    83. value: 'all',
    84. text: '全部所在地區(qū)'
    85. }
    86. ]
    87. },
    88. {
    89. value: 'bj',
    90. text: '北京市',
    91. children: [
    92. {
    93. value: 3848,
    94. text: '全部北京市'
    95. },
    96. {
    97. value: 3851,
    98. text: '東城區(qū)'
    99. },
    100. {
    101. value: 3852,
    102. text: '西城區(qū)'
    103. },
    104. {
    105. value: 3853,
    106. text: '海淀區(qū)'
    107. },
    108. {
    109. value: 3854,
    110. text: '朝陽(yáng)區(qū)'
    111. },
    112. {
    113. value: 3855,
    114. text: '豐臺(tái)區(qū)'
    115. },
    116. {
    117. value: 3856,
    118. text: '石景山區(qū)'
    119. },
    120. {
    121. value: 3857,
    122. text: '通州區(qū)'
    123. },
    124. {
    125. value: 3858,
    126. text: '順義區(qū)'
    127. },
    128. {
    129. value: 3859,
    130. text: '房山區(qū)'
    131. },
    132. {
    133. value: 3860,
    134. text: '大興區(qū)'
    135. },
    136. {
    137. value: 3861,
    138. text: '昌平區(qū)'
    139. },
    140. {
    141. value: 3862,
    142. text: '懷柔區(qū)'
    143. },
    144. {
    145. value: 3863,
    146. text: '平谷區(qū)'
    147. },
    148. {
    149. value: 3864,
    150. text: '門(mén)頭溝區(qū)'
    151. },
    152. {
    153. value: 3865,
    154. text: '密云區(qū)'
    155. },
    156. {
    157. value: 3866,
    158. text: '延慶區(qū)'
    159. }
    160. ]
    161. },
    162. {
    163. value: 'tj',
    164. text: '天津市',
    165. children: [
    166. {
    167. value: 3849,
    168. text: '全部天津市'
    169. },
    170. {
    171. value: 3879,
    172. text: '和平區(qū)'
    173. },
    174. {
    175. value: 3880,
    176. text: '河?xùn)|區(qū)'
    177. },
    178. {
    179. value: 3881,
    180. text: '河西區(qū)'
    181. },
    182. {
    183. value: 3882,
    184. text: '南開(kāi)區(qū)'
    185. },
    186. {
    187. value: 3883,
    188. text: '河北區(qū)'
    189. },
    190. {
    191. value: 3884,
    192. text: '紅橋區(qū)'
    193. },
    194. {
    195. value: 3885,
    196. text: '塘沽區(qū)'
    197. },
    198. {
    199. value: 3886,
    200. text: '漢沽區(qū)'
    201. },
    202. {
    203. value: 3887,
    204. text: '大港區(qū)'
    205. },
    206. {
    207. value: 3888,
    208. text: '東麗區(qū)'
    209. },
    210. {
    211. value: 3889,
    212. text: '西青區(qū)'
    213. },
    214. {
    215. value: 3890,
    216. text: '津南區(qū)'
    217. },
    218. {
    219. value: 3891,
    220. text: '北辰區(qū)'
    221. },
    222. {
    223. value: 3892,
    224. text: '武清區(qū)'
    225. },
    226. {
    227. value: 3893,
    228. text: '寶坻區(qū)'
    229. },
    230. {
    231. value: 3894,
    232. text: '寧河縣'
    233. },
    234. {
    235. value: 3895,
    236. text: '靜海區(qū)'
    237. },
    238. {
    239. value: 3896,
    240. text: '薊州區(qū)'
    241. },
    242. {
    243. value: 3897,
    244. text: '濱海新區(qū)'
    245. }
    246. ]
    247. },
    248. {
    249. value: 'hb',
    250. text: '河北省',
    251. children: [
    252. {
    253. value: 3850,
    254. text: '全部河北省'
    255. },
    256. {
    257. value: 3867,
    258. text: '石家莊市'
    259. },
    260. {
    261. value: 3868,
    262. text: '唐山市'
    263. },
    264. {
    265. value: 3869,
    266. text: '秦皇島市'
    267. },
    268. {
    269. value: 3870,
    270. text: '邯鄲市'
    271. },
    272. {
    273. value: 3871,
    274. text: '邢臺(tái)市'
    275. },
    276. {
    277. value: 3872,
    278. text: '保定市'
    279. },
    280. {
    281. value: 3873,
    282. text: '張家口市'
    283. },
    284. {
    285. value: 3874,
    286. text: '承德市'
    287. },
    288. {
    289. value: 3875,
    290. text: '滄州市'
    291. },
    292. {
    293. value: 3876,
    294. text: '廊坊市'
    295. },
    296. {
    297. value: 3877,
    298. text: '衡水市'
    299. },
    300. {
    301. value: 3878,
    302. text: '涿州市'
    303. }
    304. ]
    305. }
    306. ];
    307. // 級(jí)聯(lián)篩選第二和第三列數(shù)據(jù)
    308. export const cascadeSecondAndThirdOptions = [
    309. {
    310. text: '東城區(qū)',
    311. value: '110101000000',
    312. children: [
    313. {
    314. text: '全部街道',
    315. value: '110101000000',
    316. children: [
    317. {
    318. text: '全部社區(qū)',
    319. value: '110101000000'
    320. }
    321. ]
    322. },
    323. {
    324. text: '東城區(qū)安定門(mén)街道',
    325. value: '110101004000',
    326. children: [
    327. {
    328. text: '全部社區(qū)',
    329. value: '110101004000'
    330. }
    331. ]
    332. },
    333. {
    334. text: '東城區(qū)建國(guó)門(mén)街道',
    335. value: '110101008000',
    336. children: [
    337. {
    338. text: '全部社區(qū)',
    339. value: '110101008000'
    340. },
    341. {
    342. text: '崇內(nèi)社區(qū)',
    343. value: '11110101000033398110'
    344. },
    345. {
    346. text: '東總布社區(qū)',
    347. value: '11110101000033398111'
    348. },
    349. {
    350. text: '金寶街北社區(qū)',
    351. value: '11110101000033398103'
    352. },
    353. {
    354. text: '大雅寶社區(qū)',
    355. value: '11110101000033398104'
    356. },
    357. {
    358. text: '趙家樓社區(qū)',
    359. value: '11110101000033398105'
    360. },
    361. {
    362. text: '站東社區(qū)',
    363. value: '11110101000033398106'
    364. }
    365. ]
    366. },
    367. {
    368. text: '東城區(qū)朝陽(yáng)門(mén)街道',
    369. value: '110101007000',
    370. children: [
    371. {
    372. text: '全部社區(qū)',
    373. value: '110101007000'
    374. }
    375. ]
    376. },
    377. {
    378. text: '東城區(qū)東直門(mén)街道',
    379. value: '110101009000',
    380. children: [
    381. {
    382. text: '全部社區(qū)',
    383. value: '110101009000'
    384. }
    385. ]
    386. },
    387. {
    388. text: '東城區(qū)東華門(mén)街道',
    389. value: '110101001000',
    390. children: [
    391. {
    392. text: '全部社區(qū)',
    393. value: '110101001000'
    394. },
    395. {
    396. text: '正義路社區(qū)',
    397. value: '11110101000033443B01'
    398. },
    399. {
    400. text: '臺(tái)基廠社區(qū)',
    401. value: '11110101000033443B08'
    402. },
    403. {
    404. text: '南池子社區(qū)',
    405. value: '11110101000033443B09'
    406. },
    407. {
    408. text: '智德社區(qū)',
    409. value: '11110101000033443B11'
    410. },
    411. {
    412. text: '銀閘社區(qū)',
    413. value: '11110101000033443B13'
    414. },
    415. {
    416. text: '王府井社區(qū)',
    417. value: '11110101000033443B19'
    418. },
    419. {
    420. text: '東廠社區(qū)',
    421. value: '11110101000033443B20'
    422. }
    423. ]
    424. },
    425. {
    426. text: '東城區(qū)和平里街道',
    427. value: '110101010000',
    428. children: [
    429. {
    430. text: '全部社區(qū)',
    431. value: '110101010000'
    432. }
    433. ]
    434. },
    435. {
    436. text: '東城區(qū)北新橋街道',
    437. value: '110101005000',
    438. children: [
    439. {
    440. text: '全部社區(qū)',
    441. value: '110101005000'
    442. },
    443. {
    444. text: '北官?gòu)d社區(qū)',
    445. value: '11110101000033478X01'
    446. },
    447. {
    448. text: '民安社區(qū)',
    449. value: '11110101000033478X02'
    450. },
    451. {
    452. text: '北新倉(cāng)社區(qū)',
    453. value: '11110101000033478X03'
    454. },
    455. {
    456. text: '海運(yùn)倉(cāng)社區(qū)',
    457. value: '11110101000033478X04'
    458. }
    459. ]
    460. }
    461. ]
    462. },
    463. {
    464. text: '西城區(qū)',
    465. value: '110102000000',
    466. children: [
    467. {
    468. text: '全部街道',
    469. value: '110102000000',
    470. children: [
    471. {
    472. text: '全部社區(qū)',
    473. value: '110102000000'
    474. }
    475. ]
    476. },
    477. {
    478. text: '西城區(qū)白紙坊街道',
    479. value: '110102019000',
    480. children: [
    481. {
    482. text: '全部社區(qū)',
    483. value: '110102019000'
    484. }
    485. ]
    486. },
    487. {
    488. text: '西城區(qū)椿樹(shù)街道',
    489. value: '110102015000',
    490. children: [
    491. {
    492. text: '全部社區(qū)',
    493. value: '110102015000'
    494. }
    495. ]
    496. },
    497. {
    498. text: '西城區(qū)大柵欄街道',
    499. value: '110102013000',
    500. children: [
    501. {
    502. text: '全部社區(qū)',
    503. value: '110102013000'
    504. }
    505. ]
    506. },
    507. {
    508. text: '西城區(qū)德勝街道',
    509. value: '110102010000',
    510. children: [
    511. {
    512. text: '全部社區(qū)',
    513. value: '110102010000'
    514. },
    515. {
    516. text: '石油社區(qū)',
    517. value: '1111010200003821X001'
    518. },
    519. {
    520. text: '水電社區(qū)',
    521. value: '1111010200003821X002'
    522. },
    523. {
    524. text: '煤炭社區(qū)',
    525. value: '1111010200003821X003'
    526. },
    527. {
    528. text: '安德路南社區(qū)',
    529. value: '1111010200003821X004'
    530. },
    531. {
    532. text: '安德路北社區(qū)',
    533. value: '1111010200003821X005'

    534. 當(dāng)前題目:創(chuàng)新互聯(lián)百度小程序教程:filter篩選
      文章轉(zhuǎn)載:http://www.dlmjj.cn/article/djspphp.html