背景：
原生开发移动端，每一个页面的组成部分是哪些呢？在一个项目文件里，每一个页面的组成部分又是哪些呢？参考链接：pages页面的组成
效果展示：
注意：
一、布局代码：
<div class="page navbar-fixed" data-page="mainWaterLine">
<div class="navbar">
<div class="navbar-inner title-page" style="background: #1680C1">
<div class="left"> <a href="#" class="back title-back"><i class="iconfont icon-fanhui-copy" style="color: #ffffff;"></i></a></div>
<div class="center i18n" data-i18n="sz_shezhe" style="color:#FFFFFF">设置</div>
<div class="right"></div>
</div>
</div>
<div class="page-content"> </div>
</div>备注：每个界面都有个这种的，在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(
`
<div class="layui-card">
<div class="layui-card-header" style="display: flex;align-items: center;">
<img src="img/yuming/icon_historyLine.png" width="20" alt="">
<div class="title-box" style="display: flex;margin-left: 10px;">
${item.routename || '航行起点名称-航行终点名称'}
</div>
</div>
<div class="layui-card-body">
<div class="nav-card-Btn" style="display: flex;justify-content: space-between;">
<div class="time-left">
<span>船名:${item.name || item.mmsi}</span>
</div>
<div class="btn-right">
<button type="button" class="layui-btn layui-bg-blue layui-btn-radius layui-btn-sm route-qiyong" data-obj='${JSON.stringify(item)}'>重新启用</button>
</div>
</div>
</div>
</div>
`
)
})
$(".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是一个封装的文件
