我的位置：首页 › 一站式数据分析平台-亿信ABI › 亿信ABI-心得体验 › ABI移动端页面表单回填报表开发心得分享 ...

ABI移动端页面表单回填报表开发心得分享

复制链接 | 收藏本帖

3864

: leiz 小试身手Lv3

发表于2020-10-20 16:27

楼主

本帖最后由 leiz 于 2020-10-20 16:32 编辑

最近有做一个简单的ABI移动端页面表单回填的报表，下面有一些小小的经验分享一下~
移动页面开发主要就是布局的问题，因为PC端的布局效果和移动端展示的效果是有差异的，通过浏览器F12即可看到，PC端的样式和移动端的样式是不一样的，所以布局这块如果展示效果不是很好的话，就需要配合客户端脚本一起使用。
1.PC端查看移动端样式的方法，将报表区的设备名称改成手机，计算后F12进入开发者工具，开发者工具中切换设备为手机即可看到移动端的样式代码，如图

2.比较常用的小脚本
输入框在移动端展示的时候，在未输入内容是显示的是请输入，表单组件中单行输入框、下拉框在右侧属性中有一个输入框提示和下拉框提示可以直接使用，但是多行输入框是没有这个属性的，需要用到以下客户端脚本控制：

$("#HHH14 textarea").attr({"placeholder":"要提示的内容"}) //HHH14为组件代号

复制代码

设置组件的背景颜色以及透明度、字体颜色

$("#HHH55 input,#HHH9 input,#HHH14 textarea").css({"background":"#0a0b39","opacity":"0.55","color":"#fff"})

复制代码

动态控制组件的显示和隐藏（因为PC端和移动端样式不一样，所以脚本不是通用的，下面是移动端的客户端脚本）：

document.getElementById("HHH9").style.display="none";//组件默认隐藏
document.getElementById("HHH14").style.display="none";//组件默认隐藏
var mutationObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
/************************当DOM元素发送改变时执行的函数体***********************/
if(mutation.attributeName === "title") {
if($("#HHH87 input.eui-form-input").val() == "其他") { //当HHH87组件的值等于多少时，HHH9、HHH14组件显示，否则就隐藏
document.getElementById("HHH9").style.display="flex";
document.getElementById("HHH14").style.display="block";
} else {
document.getElementById("HHH9").style.display="none";
document.getElementById("HHH14").style.display="none";
}
}
/*********************函数体结束*****************************/
});
});
/**Element**/
mutationObserver.observe($("#HHH87 input.eui-form-input").get(0), {
attributeFilter: [ "title"],
attributes: true,
characterData: true,
childList: false,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true
});