【APICloud】选项卡切换万用js函数

    之前自己做项目的时候遇到过这个问题，现在想起来就传上来了^-^

    因为项目需求，标签的个数和具体的选项个数都是后台可改变的，所以需要用万用的函数解决标签切换的问题，得益于apicloud的出色设计，最后抠出来了这个方案，简单的例子是这样的

（3x4的例子  PS：这里所有的标签和选项的个数和名称以及简介都需要可更换）

HTML代码：

<div class="frame_2">
                <div id="all" class="list_left left">
                    <div id="table_101" class="list_table right active" οnclick="table(check = 0)">
                        塑料
                    </div>
                    <div id="table_102" class="list_table right" οnclick="table(check = 1)">
                        金属
                    </div>
                    <div id="table_103" class="list_table right" οnclick="table(check = 2)">
                        纸类
                    </div>
                </div>



                <div class="list_right left">
                    <div id="board_101" class="list_board active_board">
                        <div class="board_frame">
                            <div class="pho_frame">
                                <div class="pho_real">
                                    <img src="" alt="101">
                                </div>
                                <div class="pho_word">
                                    $9.99/个
                                </div>
                            </div>
                            <div class="pho_frame">
                              <div class="pho_real">
                                  <img src="" alt="102">
                              </div>
                              <div class="pho_word">
                                  $0.99/个
                              </div>
                            </div>
                        </div>

                        <div class="board_frame">
                          <div class="pho_frame">
                              <div class="pho_real">
                                  <img src="" alt="103">
                              </div>
                              <div class="pho_word">
                                  $9.99/个
                              </div>
                          </div>
                          <div class="pho_frame">
                            <div class="pho_real">
                                <img src="" alt="104">
                            </div>
                            <div class="pho_word">
                                $0.99/个
                            </div>
                          </div>
                        </div>
                    </div>

                    <div id="board_102" class="list_board">
                        ###demo_2
                    </div>

                    <div id="board_103" class="list_board">
                        ###demo_3
                    </div>
                </div>
            </div>

这个是可替换区域里的一个例子（我这里写的是一个3x4的例子），我用的方法是做简单的div嵌套，屏幕适应性比较高，也比较简单，css这里具体的代码不难就不发上来了，但是要注意为了可以方便后台更改标签

！！！这里的所有区块position属性不能是absolute！！！

（建议使用flex布局，可以自行度娘）

js代码：（下面会有详解）

var count = 0;
var last_bind = 0;


function table () {
  var irem = last_bind;
  var iadd = check;
  var xxx = $api.domAll('.list_table');
  var board_z = $api.domAll('.list_board');

  if (irem != iadd) {
    $api.removeCls(xxx[irem], 'active');
    $api.addCls(xxx[iadd], 'active');
    last_bind = iadd;

    $api.removeCls(board_z[irem], 'active_board');
    $api.addCls(board_z[iadd], 'active_board');
  }
}

（为讲解方便我故意在函数前几行多写了一次呈递，实际可以省略）

在开头我建立了2个变量：count（当前选项）和 last_bind（上一打开选项  PS：两个变量初始化默认为0，0 即状态为：第一个选项卡将要（已经）打开，当前打开选项卡为第一选项卡） 负责记录选项卡的开关状态，因为闭包函数关闭即掉电，无法长期存储数据记录状态，所以以全局变量的逻辑写在外围，js文件打开即调用

函数调用流程：在html里调用这个函数的时候传入了check值，为了区分是由哪个选项卡调用此函数。然后从last_bind获取当前打开的选项卡，再从视图层传入的check获取将要打开的选项卡。（这里我在视图层使用了active动态样式切换开关状态，这个技巧APICloud文档上有）接下来用 $api.domAll 获取所有包含 .list_table 这一dom类的所有区块（即选项卡，这个例子里是图里的三个 PS：这个返回值是一个包含这三个区块ID的数组，若未设置ID会显示undefind），在获得了区块之后再用同样的方法获取右半部分的选项面板的ID（面板是用不同的层数写在一起的，实际上没有打开的面板收在了当前显示的页面之下）最后if条件框里依照last_bind和count记录的状态移除要关闭的标签和将要打开的标签切换为动态

全过程除需要视图层传入check值之外没有额外的定制化代码（check值可以在后台在改动时同时添加（后台采用object或block方法将前端框架写在服务器上，App打开时一次性加载））

以上就是粗略的过程了，dalao们若发现有错误非常感谢评论指出：）