Filtering is another component in the legend

Generally, it is necessary to use the drop-down menu in the screening scene to dynamically set the screening conditions, such as the product screening list of Taobao, JINGdong and the tourist destination screening list of Ctrip.

support

  • Configures the shell content
  • Supports dynamic refreshing of elastic layer content
  • Supports dynamic change of category titles
  • Mask layers are supported
  • Support API to close shell layer

configuration

WXML template

<view class="container">
  <ui-list list="{{dropdownConfig}}" />
</view>
Copy the code

js

const Pager = require('.. /.. /components/aotoo/core/index')
const mkDropdown = require('.. /.. /components/modules/dropdown')

Pager({
  data: {
    dropdownConfig: mkDropdown({
      id: 'xxx'.data: [{title: 'option 1'}, 
        {title: 'option - 2'}, 
        {title: 'options - 3'},
        {title: 'options - 3'},].// Menu item click response method
      tap(data, index){
        if (index === 0) {  // When the first menu is clicked
          this.updateContent({ ... checkListConfig })// Configure the shell content
          let title = this.getTitle()
        }
      }
    }),
  },
})
Copy the code

The updateContent update structure is one-time, that is, when opened again, the instance remains unchanged, and the second parameter is true if you need to force a refresh

Attributes that

Id {String} specifies the instance name. The instance can be found in page by this[id]

Data {Array} Configures a drop-down list of components that automatically generate the corresponding elastic layer

Tap {Function} pull-down menu item response event when clicked

How to set up

How do I set data

Data array shows all menu items of the drop-down menu, each item must be Object type data, each item of data can be customized, supporting pictures, text, picture group, text group and so on

Menu items are made up of item components, so they can support a very rich structure for presentation

Specify the image

{img: 'path/to/imgsrc'}
Copy the code

Specify the text

{title: 'Text heading'}
Copy the code

Specified by

{title: 'Text heading'.img: 'path/to/imgsrc'}  

// To change the text order, just put the attributes upside down
{img: 'path/to/imgsrc'.title: 'Text heading'}
Copy the code

Specify graph group, text group

/ / word set
{title: ['Text header -1'.'Text header -2']}  

/ / picture group
{img: [{src: 'path/to/imgsrc'}, {src: 'path/to/imgsrc'}}]Copy the code

Also support graph group, text group mixed row, according to demand

How to get an instance

When the id is specified, you can easily obtain the instance of the drop-down menu in the page page and call the instance method

Note the difference between Pager and Page, Page is the native method of wechat small program, Pager is the secondary encapsulation of Page, Pager supports all the attributes and methods of native Page, but vice versa

mkDropdown({ id: 'xxx' })

// Get the instance
Pager({
  onReady(){
    const instance = this['xxx']
    console.log(instance)
  }
})
Copy the code

How to configure shell content

Tap response method support sets the tap method context for pop-up content and menu item titles

  1. updateContent

{Function} update menu item pop-up layer content

  1. updateTitle

{Function} Updates menu item titles

  1. getTitle

{Function} gets the current menu item title

const Pager = require('.. /.. /components/aotoo/core/index')
const mkDropdown = require('.. /.. /components/modules/dropdown')

const listConfig = {
  "@list": {
    data: [
      'List subitem -1'.'List subitem -2'.'List subitem -3',]}}const listConfig2 = {
  "@list": {
    data: [{title: 'List subitem -1'},
      {title: 'List subitem -2'},
      {title: 'List subitem -3'}}},]const imgListConfig = {
  "@list": {
    data: [{title: 'xi xi'.img: {src: '/images/huawei.jpg'.itemStyle: 'width: 40px; '}},
      {img: {src: '/images/logo.jpg'.itemStyle: 'width: 40px; '}},
      {img: {src: '/images/wxzan.jpg'.itemStyle: 'width: 40px; '}},
    ]
  }
}

Pager({
  data: {
    tabConfig: mkDropdown({
      id: 'xxx'.data: [{title: 'option 1'},  // tap => bind:tap
        {title: 'option - 2'},  // aim => catch:tap
        {title: 'options - 3'},
        {title: 'options - 3'},].tap(item, index){
        if (index === 0) {
          this.updateContent({ ... checkListConfig })let title = this.getTitle()
          // console.log(title);
        }
        if (index === 1) {
          this.updateContent({ ... listConfig }) }if (index === 2) {
          this.updateContent({ ... listConfig2 }) }if (index === 3) {
          this.updateContent({ ... imgListConfig }) } } }), }, })Copy the code

The source code

GITHUB

/pages/dropdown

The following small program DEMO contains pull-down menus, generic filter lists, index lists, Markdown (including tables), scoring components, fruit slot machines, folding panels, two-column classification navigation (left and right), scratch cards, calendars, and other components