原生代码布局

背景：

原生开发移动端，每一个页面的组成部分是哪些呢？在一个项目文件里，每一个页面的组成部分又是哪些呢？参考链接：pages页面的组成

效果展示：

注意：

一、布局代码：

 

        

            

                
 
                
设置
                

            
        
        
  
    

备注：每个界面都有个这种的，在content里面写内容 

二、逻辑代码：

var waterLine = {
    init: function () {
        initF7.GloblalF7.onPageInit("mainWaterLine", function (data) {
            waterLine.bindDomEvent();
        });
        /**
         * 返回按钮时执行
         */
        initF7.GloblalF7.onPageAfterBack("mainWaterLine", function (page) {
            MAPutils.GlobalMap.updateSize();
        });
    },
    bindDomEvent: function () {
        waterLine.getApiData();
    },
    getApiData: function () {
        waterLine.load = layui.layer.load();
        $.ajax({
            url: Config.API_SERVER_URL + '/personalcenter/vesselroute/v1/getUserRouteByPage',
            type: "POST",
            data: {
                "param": JSON.stringify({
                    page: 1,
                    limit: 10,
                })
            }
        }).done((res) => {
            if (res.code == 200 && res.data.length > 0) {
                const obj = res.data
                let content = new Array()
                $.each(_.uniqWith(obj, _.isEqual).filter(item => item.routename), (i, item) => {
                    content.push(
                        `
                        

                            

                                
                                

                                    ${item.routename || '航行起点名称-航行终点名称'} 
                                
                            
                            

                                

                                    

                                        船名:${item.name || item.mmsi}
                                    
                                    

                                        重新启用
                                    
                                
                            
                        
                        `
                    )
                })
                $(".layui-col-md6").html(content.join(""));
                $(".layui-col-md6 .route-qiyong").on("click", function () {
                    let obj = $(this).attr("data-obj");
                    //返回地图页
                    initF7.mainView.router.back({
                        pageName: 'main',
                        force: true
                    });
                    if (obj) {
                        let routeObj = JSON.parse(obj);
                        Config.historyHxobj = routeObj;
                        initF7.GloblalF7.closeModal();
                        Config.ishangxianpop = 1;
                        $(".tabbar-custom-container").hide()
                        if (Config.bindShipData && MAPutils.calcPointToLineDistance(Config.bindShipData.geometry, Config.historyHxobj.geometry) > 2) {
                            MapInit.beyondDistance(1)
                        } else {
                            Chaxunhx.starthxzt(
                                Config.historyHxobj.mmsi,
                                Config.historyHxobj.routemrn,
                                Config.historyHxobj.geometry,
                                Config.historyHxobj.routename
                            )
                        }
                    }
                })
            } else {
                layerGlobal.msg("未能查询到相关码头候港数据")
            }
        }).fail(function (e) {
            layerGlobal.msg("未能查询到相关码头候港数据")
        }).always(function (res) {
            layui.layer.close(waterLine.load)
        })
    }
}
waterLine.init()

三、页面互动性

当点击页面按钮“重新启用”，与其它页面联动，就与data-page的绑定值有关：

核心代码：

 $(".layui-col-md6 .route-qiyong").on("click", function () {
                    let obj = $(this).attr("data-obj");
                    //返回地图页
                    initF7.mainView.router.back({
                        pageName: 'main',
                        force: true
                    });
                    if (obj) {
                        let routeObj = JSON.parse(obj);
                        Config.historyHxobj = routeObj;
                        initF7.GloblalF7.closeModal();
                        Config.ishangxianpop = 1;
                        $(".tabbar-custom-container").hide()
                        if (Config.bindShipData && MAPutils.calcPointToLineDistance(Config.bindShipData.geometry, Config.historyHxobj.geometry) > 2) {
                            MapInit.beyondDistance(1)
                        } else {
                            Chaxunhx.starthxzt(
                                Config.historyHxobj.mmsi,
                                Config.historyHxobj.routemrn,
                                Config.historyHxobj.geometry,
                                Config.historyHxobj.routename
                            )
                        }
                    }
                })

解释：

Chaxunhx.js是一个封装的文件