调用：ButtonList 背景：bg2.jpg

image.png
image.png

⚙ 配置

属性 说明 是否必需
uniClick 选择统一处理。 YES
btnList 按钮列表数据。 YES
badge 角标 NO
searchBtnClickHandle 搜索框回调接口，如不配置则不显示搜索框。 NO
maxLength 搜索框最大输入位数 NO
kbType 搜索框键盘类型，如不配置则不显示搜索框。 NO
onEnter 搜索框回车回调 NO

整体配置范例

  2. function ButtonList() {
  3.   var data = {
  4.     model: "ButtonList",
  5.     config: {
  6.       shell: commonShellCfg,
  7.       bgImg: "bg2.jpg",
  8.       modInAnimation: "fadeIn",
  9.       //角标
  10.       badge:{
  11.         url:"./h5/img/assets/tip_zfb.png",
  12.         style:{
  13.           width:"110px",height:"40px",
  14.           top:"110px",left:"250px"}
  15.       },
  16.       //搜索框回调接口，如不配置则不显示搜索框。
  17.       searchBtnClickHandle: function (value) {
  18.         console.log(value)
  19.         var newList = [
  20.           {
  21.             txt: '科室A1',
  22.           },
  23.           {
  24.             txt: '科室A2',
  25.           },
  26.         ]
  27.         return newList
  28.       },
  29.       //搜索框最大输入位数
  30.       maxLength: 11,
  31.       //搜索框键盘类型
  32.       kbType: 'mix',
  33.       //搜索框回车回调
  34.       onEnter: "onEnter",
  35.       //按钮点击统一处理
  36.       uniClick: testFun,
  37.       btnList: [
  38.       {
  39.         txt: "神经内科<br/>剩余号：999",
  40.         // bgColor: "#e2e2e2",
  41.         fontColor: "#fff"
  42.       },
  43.       {
  44.         txt: "消化内科<br/><div style='color:#ffdd44'>剩余号：2</div>",
  45.         fontColor: "#ffdd44"
  46.       },
  47.       {
  48.         txt: "内科",
  49.       },
  50.       {
  51.         txt: "14:00:00-14:30:00",
  52.       },
  53.       {
  54.         txt: "妇产科",
  55.       },
  56.       {
  57.         txt: "男科",
  58.       },
  59.       {
  60.         txt: "儿科",
  61.       },
  62.       {
  63.         txt: "五官科",
  64.       },
  65.       {
  66.         txt: "肿瘤科",
  67.       },
  68.       {
  69.         txt: "皮肤性病科",
  70.       },
  71.       {
  72.         txt: "中医科",
  73.       },
  74.       {
  75.         txt: "传染科",
  76.       },
  77.       {
  78.         txt: "精神心理科",
  79.       },
  80.       {
  81.         txt: "整形美容科",
  82.       },
  83.       {
  84.         txt: "营养科",
  85.       },
  86.       {
  87.         txt: "生殖中心",
  88.         disabled: true,
  89.       },
  90.     ]
  91.     }
  92.   };
  93.   return data;
  94. }

uniClick

  1. //配置
  2. uniClick:"buttonlist_uniclick"
  4. //自定义函数
  5. function buttonlist_uniclick(index,item) {
  6.     //获取按钮索引以及对应索引的值
  7.     console.log(index,item);
  8. }

btnList

  1. btnList: [
  2.         {
  3.           //文本内容（支持HTML标签）
  4.           //换行加"<br/>"
  5.           txt: "001",
  6.           //是否要禁用（非必要，默认false）。
  7.           disabled: false,
  8.           //单独定义按钮块背景色（非必要）
  9.           bgColor:"#00ddff",
  10.           //单独定义按钮字体颜色（非必要）
  11.           fontColor:"#dddddd"
  12.         },
  13.         {
  14.           content: "<div style='color:red'>002</div>",
  15.           disabled: true,
  16.         },
  17.         {
  18.           content: "003",  
  19.         },
  20.        ...
  21.   ]

badge

  1. //角标
  2. badge:{
  3.   url:"./h5/img/assets/tip_zfb.png",
  4.   style:{
  5.       width:"110px",height:"40px",
  6.       top:"110px",left:"250px"
  7.   }
  8. },

searchBtnClickHandle

  1. //搜索框回调接口，如不配置则不显示搜索框。
  2. searchBtnClickHandle: function (value) {
  3.   console.log(value)
  4.   var newList = [
  5.     {
  6.       txt: '科室A1',
  7.     },
  8.     {
  9.       txt: '科室A2',
  10.     },
  11.   ]
  12.   return newList
  13. },

maxLength

  1.  //搜索框最大输入位数
  2.  maxLength: 11,

kbType

  1. //搜索框键盘类型
  2. kbType: 'mix',

onEnter

  1. //搜索框回车回调
  2. onEnter: "onEnter",

♨️ JS Call

无

🚀 getData

无