自由标注实现底部导航view

问题描述：

      1.底部导航view在点击跳转不同页面时会出现闪烁的问题

      2.导航按钮可反复点击不断刷新当前页面

解决思路：

      采用服务器组装 调用view及 通过自由标注的方式实现view的页面跳转导航;

具体如下：(通过一个小案例来说明)

       1. 采用服务器组装 调用 导航view并传递参数

         

<div data--url="/v/footer.html?cs=a" data-wwclass="view1" data-wwcomposer="server">在此处右键编辑view(/v/footer.html?cs=a)</div>

                 参数说明:                    

                                /v/footer.html: 需调用的底部导航view的url;

                                cs: 给view的传参;作用:view通过参数cs的值来判断区分是哪个页面调用了该view

 

                 注: 1, view采用服务器组装

                       2, 将底部view (/v/footer.html)涉及的所有页面,都采用上述方法调用view;cs参数根据不同的页面设置不同的值;

 2.底部view的动态化

            a. 页面(html)后端代码

                get方式接收参数cs

        

               用返回代码段,将参数返回到页面:      

                /*INSBEGIN:STDOUT*/
                //@wwcomments:{编号2}页面正常情况下,输出的数据  注意1：页面中信息点的标注方式不同返回数据的格式也不同 注意2：默认是针对数据绑定方式的数据返回格式
                function() {

                  _.extend(finish_data, {
                    "success": true,
                    "cs": inputs.cs

                  });
                },
                //@wweditorinfo:{"id":"cf760ed9cbd5d5e99d047f3b7ac9dad0","editor":{"jsonValue":{"success":true,"href":"tmp_data.href","href1":"tmp_data.href1","href2":"tmp_data.href2","_runCommand":[{"command":"addClass","params":["#b1","active"]}]},"steppurpose":{"purpose":"finishdata"}}}
                /*INSEND:STDOUT*/

         

          b.view的页面标注:

     

 

%3Ccode%3E%26lt%3Bdiv%20class%3D%26quot%3Bnavbar%20navbar-default%20navbar-fixed-bottom%26quot%3B%20style%3D%26quot%3B%20position%3A%20fixed%3B%20opacity%3A%201%3B%20z-index%3A%201030%3B%20%26quot%3B%26gt%3B%0A%26lt%3Btable%20cellpadding%3D%26quot%3B1%26quot%3B%20cellspacing%3D%26quot%3B1%26quot%3B%20class%3D%26quot%3Bafooter%26quot%3B%20style%3D%26quot%3Bwidth%3A100%25%3Bbackground-color%3A%23000%3B%26quot%3B%26gt%3B%0A%09%26lt%3Btbody%26gt%3B%0A%09%09%26lt%3Btr%26gt%3B%26lt%3B%21--%7B%7B%3Fit.cs%20%3D%3D%26quot%3Ba%26quot%3B%7D%7D--%26gt%3B%0A%09%09%09%26lt%3Btd%20class%3D%26quot%3Btext-center%20active%26quot%3B%20data-positionstyle%3D%26quot%3Bstatic%26quot%3B%20style%3D%26quot%3Bwidth%3A%2020%25%3B%20padding%3A%209px%200px%208px%3B%26quot%3B%26gt%3B%26lt%3Ba%20href%3D%26quot%3Bjavascript%3Avoid%280%29%3B%26quot%3B%26gt%3B%26lt%3Bspan%20class%3D%26quot%3Bfa%20fa-paper-plane%26quot%3B%20style%3D%26quot%3Bcolor%3Argb%28255%2C%20255%2C%20255%29%3Bfont-size%3A18px%3B%26quot%3B%26gt%3B%26lt%3B/span%26gt%3B%26lt%3Bbr%20/%26gt%3B%0A%09%09%09%26lt%3Bspan%20style%3D%26quot%3Bcolor%3A%23fff%3Bfont-size%3A12px%3B%26quot%3B%26gt%3B%26%23x9700%3B%26%23x6C42%3B%26%23x53D1%3B%26%23x5E03%3B%26lt%3B/span%26gt%3B%20%26lt%3B/a%26gt%3B%26lt%3B/td%26gt%3B%0A%09%09%09%26lt%3B%21--%7B%7B%3F%3F%7D%7D--%26gt%3B%0A%09%09%09%26lt%3Btd%20class%3D%26quot%3Btext-center%20%26quot%3B%20data-positionstyle%3D%26quot%3Bstatic%26quot%3B%20style%3D%26quot%3Bwidth%3A%2020%25%3B%20padding%3A%209px%200px%208px%3B%26quot%3B%26gt%3B%26lt%3Ba%20href%3D%26quot%3B/test.html%26quot%3B%26gt%3B%26lt%3Bspan%20class%3D%26quot%3Bfa%20fa-paper-plane%26quot%3B%20style%3D%26quot%3Bcolor%3Argb%28255%2C%20255%2C%20255%29%3Bfont-size%3A18px%3B%26quot%3B%26gt%3B%26lt%3B/span%26gt%3B%26lt%3Bbr%20/%26gt%3B%0A%09%09%09%26lt%3Bspan%20style%3D%26quot%3Bcolor%3A%23fff%3Bfont-size%3A12px%3B%26quot%3B%26gt%3B%26%23x9700%3B%26%23x6C42%3B%26%23x53D1%3B%26%23x5E03%3B%26lt%3B/span%26gt%3B%20%26lt%3B/a%26gt%3B%26lt%3B/td%26gt%3B%0A%09%09%09%26lt%3B%21--%7B%7B%3F%7D%7D--%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%26lt%3B%21--%7B%7B%3Fit.cs%20%3D%3D%26quot%3Bb%26quot%3B%7D%7D--%26gt%3B%0A%09%09%09%26lt%3Btd%20class%3D%26quot%3Btext-center%20active%26quot%3B%20data-positionstyle%3D%26quot%3Bstatic%26quot%3B%20style%3D%26quot%3Bwidth%3A%2020%25%3B%20padding%3A%209px%200px%208px%3B%26quot%3B%26gt%3B%26lt%3Ba%20href%3D%26quot%3Bjavascript%3Avoid%280%29%3B%26quot%3B%26gt%3B%26lt%3Bspan%20class%3D%26quot%3Bfa%20fa-home%26quot%3B%20style%3D%26quot%3Bcolor%3Argb%28255%2C%20255%2C%20255%29%3Bfont-size%3A18px%3B%26quot%3B%26gt%3B%26lt%3B/span%26gt%3B%26lt%3Bbr%20/%26gt%3B%0A%09%09%09%26lt%3Bspan%20style%3D%26quot%3Bcolor%3A%23fff%3Bfont-size%3A12px%3B%26quot%3B%26gt%3B%26%23x9996%3B%26%23x9875%3B%26lt%3B/span%26gt%3B%20%26lt%3B/a%26gt%3B%26lt%3B/td%26gt%3B%0A%09%09%09%26lt%3B%21--%7B%7B%3F%3F%7D%7D--%26gt%3B%0A%09%09%09%26lt%3Btd%20class%3D%26quot%3Btext-center%20%26quot%3B%20data-positionstyle%3D%26quot%3Bstatic%26quot%3B%20style%3D%26quot%3Bwidth%3A%2020%25%3B%20padding%3A%209px%200px%208px%3B%26quot%3B%26gt%3B%26lt%3Ba%20href%3D%26quot%3B/test1.html%26quot%3B%26gt%3B%26lt%3Bspan%20class%3D%26quot%3Bfa%20fa-home%26quot%3B%20style%3D%26quot%3Bcolor%3Argb%28255%2C%20255%2C%20255%29%3Bfont-size%3A18px%3B%26quot%3B%26gt%3B%26lt%3B/span%26gt%3B%26lt%3Bbr%20/%26gt%3B%0A%09%09%09%26lt%3Bspan%20style%3D%26quot%3Bcolor%3A%23fff%3Bfont-size%3A12px%3B%26quot%3B%26gt%3B%26%23x9996%3B%26%23x9875%3B%26lt%3B/span%26gt%3B%20%26lt%3B/a%26gt%3B%26lt%3B/td%26gt%3B%0A%09%09%09%26lt%3B%21--%7B%7B%3F%7D%7D--%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%26lt%3B%21--%7B%7B%3Fit.cs%20%3D%3D%26quot%3Bc%26quot%3B%7D%7D--%26gt%3B%0A%09%09%09%26lt%3Btd%20class%3D%26quot%3Btext-center%20active%26quot%3B%20data-positionstyle%3D%26quot%3Bstatic%26quot%3B%20style%3D%26quot%3Bwidth%3A%2020%25%3B%20padding%3A%209px%200px%208px%3B%26quot%3B%26gt%3B%26lt%3Ba%20href%3D%26quot%3Bjavascript%3Avoid%280%29%3B%26quot%3B%26gt%3B%26lt%3Bspan%20class%3D%26quot%3Bfa%20fa-comments%26quot%3B%20style%3D%26quot%3Bcolor%3Argb%28255%2C%20255%2C%20255%29%3Bfont-size%3A18px%3B%26quot%3B%26gt%3B%26lt%3B/span%26gt%3B%26lt%3Bbr%20/%26gt%3B%0A%09%09%09%26lt%3Bspan%20style%3D%26quot%3Bcolor%3A%23fff%3Bfont-size%3A12px%3B%26quot%3B%26gt%3B%26%23x6D88%3B%26%23x606F%3B%26lt%3B/span%26gt%3B%20%26lt%3B/a%26gt%3B%26lt%3B/td%26gt%3B%0A%09%09%09%26lt%3B%21--%7B%7B%3F%3F%7D%7D--%26gt%3B%0A%09%09%09%26lt%3Btd%20class%3D%26quot%3Btext-center%20%26quot%3B%20data-positionstyle%3D%26quot%3Bstatic%26quot%3B%20style%3D%26quot%3Bwidth%3A%2020%25%3B%20padding%3A%209px%200px%208px%3B%26quot%3B%26gt%3B%26lt%3Ba%20href%3D%26quot%3B/test2.html%26quot%3B%26gt%3B%26lt%3Bspan%20class%3D%26quot%3Bfa%20fa-comments%26quot%3B%20style%3D%26quot%3Bcolor%3Argb%28255%2C%20255%2C%20255%29%3Bfont-size%3A18px%3B%26quot%3B%26gt%3B%26lt%3B/span%26gt%3B%26lt%3Bbr%20/%26gt%3B%0A%09%09%09%26lt%3Bspan%20style%3D%26quot%3Bcolor%3A%23fff%3Bfont-size%3A12px%3B%26quot%3B%26gt%3B%26%23x6D88%3B%26%23x606F%3B%26lt%3B/span%26gt%3B%20%26lt%3B/a%26gt%3B%26lt%3B/td%26gt%3B%0A%09%09%09%26lt%3B%21--%7B%7B%3F%7D%7D--%26gt%3B%0A%09%09%26lt%3B/tr%26gt%3B%0A%09%26lt%3B/tbody%26gt%3B%0A%26lt%3B/table%26gt%3B%0A%26lt%3B/div%26gt%3B%0A%3C/code%3E

         标注说明: 1, 每个导航按钮都做两个;一个为选中状态的效果,一个为未选中状态的效果;(本案例中的选中状态通过css类: active 实现);

                          2, 选中效果的导航按钮禁止重复点击调用,通过href="javascript:void(0);" 实现; 未选中效果的导航按钮请自行设置正确的跳转路径;

                          3, 采用自由标注的 条件标注 通过参数cs的值来判断当前按钮是否是选中状态;

案例视频: