调用：AutoIndex 背景：bg1.jpg 说明：该页面目前支持1~9个按钮的自动布局。 将根据配置的btnList中的按钮个数来自动生成对应布局。 🔴进入该页面会自动隐藏导航栏、用户信息栏、当前页面位置信息栏！

image.png
image.png

⚙ 配置

属性 说明 是否必需
uniClick 菜单统一点击事件 YES
qrcode 二维码图片 NO
logo 是否显示国光logo NO
btnList 菜单按钮数据配置 YES
tip 信息提示
例如：凭条缺纸等硬件故障信息的提示		 NO
stip 按钮组下方动态轮播显示的提示信息（带淡入淡出效果） NO
poster 广告轮播 YES

整体配置范例

  1. function AutoIndex() {
  2.   var data = {
  3.     model: "AutoIndex",
  4.     config: {
  5.       shell: indexShellCfg,
  6.       bgImg: "bg1.jpg",
  7.       modInAnimation: "fadeIn",
  8.       // uniClick: "AutoIndex_UniClick",
  9.       uniClick: testFun,
  10.       stip: ["请您按上面功能键进行使用", "本机可进行办理业务、查询业务、缴费业务"],
  11.       test: function () { alert("!!!") },
  12.       logo:true,
  13.       qrcode: {
  14.         url: "./h5/img/assets/qrcode.png",
  15.         style: {
  16.           bottom: "5px",
  17.           right: "10px",
  18.           width:"100px"
  19.         }
  20.       },
  21.       poster:{
  22.         delay:5,
  23.         list:[
  24.           "./h5/img/assets/ad1.png",
  25.           "./h5/img/assets/ad5.png",
  26.           "./h5/img/assets/ad6.png",
  27.         ]
  28.       },
  29.       tip: {
  30.         type: "error", //warn|error|info
  31.         txt: "磁卡机故障"
  32.       },
  33.       btnList: [
  34.         {
  35.           txt: "办理诊疗卡",
  36.           icon: "./h5/img/icon/index/mindex_icon_05.png",
  37.           disabled: false,
  38.         },
  39.         {
  40.           txt: "查询",
  41.           icon: "./h5/img/icon/index/mindex_icon_06.png",
  42.           // disabled: true,
  43.         },
  44.         {
  45.           txt: "缴费",
  46.           icon: "./h5/img/icon/index/mindex_icon_02.png",
  47.           disabled: false,
  48.         },
  49.         {
  50.           txt: "检验单查询及打印",
  51.           icon: "./h5/img/icon/index/mindex_icon_04.png",
  52.           disabled: false,
  53.         },
  54.         {
  55.           txt: "当日挂号",
  56.           icon: "./h5/img/icon/index/mindex_icon_01.png",
  57.           disabled: false,
  58.         },
  59.         {
  60.           txt: "当日挂号",
  61.           icon: "./h5/img/icon/index/mindex_icon_01.png",
  62.           disabled: false,
  63.         },
  64.         {
  65.           txt: "当日挂号",
  66.           icon: "./h5/img/icon/index/mindex_icon_01.png",
  67.           disabled: false,
  68.         },
  69.         {
  70.           txt: "预约挂号",
  71.           icon: "./h5/img/icon/index/mindex_icon_01.png",
  72.           disabled: false,
  73.         },
  74.         {
  75.           txt: "预约挂号",
  76.           icon: "./h5/img/icon/index/mindex_icon_01.png",
  77.           disabled: false,
  78.         }
  79.       ]
  80.     }
  81.   };
  82.   return data;
  83. }


uniClick

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

qrcode

  1. qrcode:{
  2.     //二维码图片路径
  3.     url: "./h5/img/assets/qrcode.png",
  4.     //二维码图片样式(没有特殊要求时，该属性可以不配置)
  5.     style: {
  6.              //图片宽度
  7.              width:"50px",
  8.              //图片高度
  9.              height:"50px",
  10.              //图片距离页面底部距离
  11.              bottom: "40px",
  12.              //图片距离页面右侧距离
  13.              right: "10px",
  14.     }
  15. }

btnList

  1. btnList:[
  2.   {
  3.     txt: "办理诊疗卡",
  4.     icon: "./h5/img/icon/index/mindex_icon_05.png",
  5.     disabled: true,
  6.   },…
  7. ]

tip

  1. tip:{
  2.   //提示类型
  3.   type:"warn",//warn|error|info
  4.   //提示内容
  5.   txt:""
  6. }

stip

  1. stip:["提示信息内容0000001","提示信息内容0000002"]

poster

  1. //只支持竖屏1080*1920，1-3个按钮注意切换大图
  2. poster:{
  3.   delay:5,
  4.   list:[
  5.       "./h5/img/assets/ad1.png",
  6.       "./h5/img/assets/ad5.png",
  7.       "./h5/img/assets/ad6.png",
  8.   ]
  9. },

♨️ JS Call

无

🚀 getData

无9