小程序模板网

小程序自定义组件之下拉菜单

2020-05-13 周武王

小程序自定义组件之下拉菜单(图1)

图例中筛选是另外一个组件

一般在筛选的场景中需要使用下拉菜单,动态设置筛选条件,比如淘宝,京东的产品筛选列表,携程的旅游目的地的筛选列表。

支持

  • 配置化设置弹层内容
  • 支持动态刷新弹层内容
  • 支持动态修改分类标题
  • 支持遮罩层
  • 支持api关闭弹层

配置

wxml模板

<view class="container">
  <ui-list list="{{tabConfig}}" />
</view>
复制代码

js

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

Pager({
  data: {
    tabConfig: mkDropdown({
      id: 'xxx',
      data: [
        {title: '选项-1'}, 
        {title: '选项-2'}, 
        {title: '选项-3'},
        {title: '选项-3'},
      ],
      tap(data, index){
        if (index === 0) {
          this.updateContent({ ...checkListConfig })  // 配置弹层内容
          let title = this.getTitle()
        }
      }
    }),
  },
})
复制代码

updateContent更新的结构是一次性的,即再次打开时,实例维持不变,如果需要强制刷新,指定第二参数为true

属性说明

id

{String}

指定实例名称,在page中可通过this[id]找到实例

data

{Array}

配置下拉菜单的列表,组件自动生成器对应的弹层

tap

{Function}

下拉菜单项点击时的响应事件

如何设置

如何设置data数据

data数组展示下拉菜单的所有菜单项,每一项必须为Object类型的数据,每一项数据可自定义,支持图片,文字,图片组,文字组等等

菜单项由item组件构成,因此可以支持非常丰富的结构用于展示

指定图片

{img: 'path/to/imgsrc'}
复制代码

指定文字

{title: '文字标题'}
复制代码

指定图文

{title: '文字标题', img: 'path/to/imgsrc'}  

// 更改图文顺序只需要把属性位置倒置  
{img: 'path/to/imgsrc', title: '文字标题'}
复制代码

指定图组,文字组

// 文字组
{title: ['文字标题-1', '文字标题-2']}  

// 图片组
{img: [{src: 'path/to/imgsrc'}, {src: 'path/to/imgsrc'}]}
复制代码

同时也支持图组,文字组混排,根据需求

如何获取实例

当指定id后,便可以在page页中,方便的获取下拉菜单的实例,调用实例方法

注意Pager和Page的区别,Page是微信小程序原生方法,Pager是对Page的二次封装,Pager支持原生Page的所有属性、方法,但反过来则不能支持

mkDropdown({ id: 'xxx' })

// 获取实例  
Pager({
  onReady(){
    const instance = this['xxx']
    console.log(instance)
  }
})
复制代码

如何配置弹层内容

通过tap响应方法支持,设置弹出内容和菜单项标题

tap方法的上下文(context)环境

  1. updateContent

    {Function} 更新菜单项弹出层内容

  2. updateTitle

    {Function}

    更新菜单项标题

  3. getTitle

    {Function}

    获取当前菜单项标题

mkDropdown({ 
  id: 'xxx',
  data: [...],
  tap(data, index){ // data为菜单项数据,index为菜单项位置  
    if (index === 0) {  // 菜单栏第一项
      this.updateTitle()  // 更新标题
      // this.updateContent()  更新内容
    }
  }
})
复制代码

更新弹出类容为列表

下列配置,会在弹出框中渲染列表结构

this.updateContent({
  "@list": {
    data: [
      {title: '1'},
      {title: '2'},
    ]
  }
})
复制代码

更新弹出类容为表单

下列配置,会在弹出框中渲染列表结构

this.updateContent({
  "@form": {
    data: [
      {title: '表单区域1', input: [...]},
      {title: '表单区域2', input: [...]},
    ]
  }
})
复制代码

更新弹出类容为多层筛选列表

下列配置,会在弹出框中渲染列表结构

this.updateContent({
  "@list": mkChecklist({
    ...
  })
})
复制代码
 


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/25133.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询