BUI 常见问题解决方案集锦

目录

bui.ready 问题

代码已经写在 bui.ready里面,为何调试不了原生功能?

原因:
BUI使用web跟原生的开发有个开关切换,当 bui.isWebapp = true; 使用web方式, bui.isWebapp=false;则使用原生方式, 手机端的初始化跟web的初始化不一样,所以需要手动修改,一般BUI已经把这个开关修改放在了 js/app/_config.js 公共配置文件里面.

解决方案:
设置 bui.isWebapp= false;
这里还需要注意, 当切换不同平台以后, 页面的传参也不一样了, 需要通过 bui.getPageparams() 方法获取, 具体查看方法里面的传参取参示例.

main计算问题

1. 问题描述:

BUI 为什么需要计算main 的高度?

原因:
上中下是移动端常见的一种结构,当然实现这种布局的方式有很多, 比如,
第1种, 你可以使用绝对定位或者固定定位的方式, 固定定位以后,中间的内容的坐标就变成0; 我们可以给中间内容加上padding的方式. 这样当头部变高或者不要头部的时候, 或者ios 在viewport下不支持fixed的情况, 这种方式带来的弊端就比较明显了.这也是BT最早的UI采用的方式,最终还是得通过计算的方式.
第2种, 自从有了css3以后,我们有flex布局可以实现对页面的垂直布局有了很好的支持,我可以头部固定,底部固定,中间自适应, 可惜的是这种布局在移动终端的适应性有局限性, 低配的手机都不支持,就连微信都不支持.

解决方案:
第3种, 也就是我们采用的计算的方式,在页面初始化前先进行计算,固定好他们各自该在的位置.你中间的内容也就能够自适应,它没有第1种的ios兼容问题,用户也不用去管用不用设置padding, 也没有第2种的兼容问题.他只提供一个框架上的容器,你不需要的时候就删除对应的标签即可. 虽然需要动态计算耗一点性能,但这个对于页面初始化之前丝毫没有影响.另外它还可以解决,当页面跳转导致的webview高度问题.
当然,你如果不喜欢这种计算的方式,你也可以使用自己认为合适的方式,不使用 bui-page header main footer 这几个保留样式名就行.

bui.alert 问题

1. 问题描述:

bui.alert(),直接输出时,为啥出现在头部,点击确定变居中的?

原因:
页面里面没有采用BUI的标准结构.

解决方案:
采用默认标准结构: .bui-page>header+main+footer. 可以解决问题.遵守BUI的规范可以确保你的控件不会出现问题.
那是不是一定需要这个标准结构?
这是BUI提供出来的一个标准结构,你可以不使用这个结构,但是需要你自己会写样式去撑开页面.

2. 问题描述:

alert 点确定无法关闭.

原因:
信息提醒框默认都有动画, 开发不想要弹出框有动画, 所以开发在页面上写了 .animated {-webkit-animation-duration:0s;}改为了0s. 事件需要在动画之后触发,没动画就不触发了.

解决方案:
采用confirm,自定义弹出效果, alert传 json 会被当调试.

bui.confirm({
    "content":"我是提醒内容",
    "buttons":["确定"]
    "effect":"showIn",
    callback: function () {
        console.log(this)
    }
});

bui.slide 问题

1. 问题描述:

bui.slide 设置的高度为什么跟自己想要的高度不一致? 比方设置了200,却变成了120 ?

原因:
BUI 本身就是为了解决这种多终端适配而来,这种多终端适配并不是指我做出来的东西,看上去差不多效果就行了,BUI需要做到不同终端展示出来的效果跟效果图一模一样的比例, 所以BUI的控件大部分默认是使用的等比缩放的方式. 比如, 你定义了 slide 高度200, 如果不缩放,那则不同手机看到的高度都是200px. 这样随着不同宽度的不同, 整体的宽度则有可能出现拉伸的情况. 而如果使用了缩放,那默认就会随着宽度,高度也会做等比的缩放, 这个才是真正意义上的一模一样. 原生是使用dp 为单位,也是同样的道理.最终才能保持两种的缩放一模一样.

解决方案:
某种特殊情况下,我就是需要高度是200px,不需要缩放,那则可以修改 zoom: 参数为 false;但首先你得理解为什么要缩放.

2. 问题描述:

有4个菜单,初始化以后,把顶部tab菜单的后2个给display:none;导致菜单跨过第2屏.

原因:
slide是使用的弹性布局制作的一个控件, 当内容部分display:none以后,宽度已经是计算4个的宽度,但是少了2个以后,每个就会跨屏了.这种属于对控件使用不当.究其原因,是有着各种不同的tab结构,有的进来后面没有内容,只有2个,所以想去掉.页面使用的模板引擎.

解决方案:
模板采用动态渲染的方式就好啦, 根据需要生成结构再进行初始化. 如果使用模板应该也可以,但在模板的生成条件上需要做好结构的生成判断,而不是生成以后再隐藏掉.

3. 问题描述:

tab初始化的时候,页面正常,在点击操作的时候,需要隐藏tab外部的某个dom元素,这样会导致页面的滚动条计算不准确.

原因:
控件只初始化一次, 当对页面操作隐藏元素时,需要再执行对应的init方法.

解决方案:
执行对应的init方法.

var uiSlide = bui.slide({
        id:"#uiSlide",
        menu:".bui-nav",
        children:".bui-tab-main ul",
        scroll: true
    })

    // 在需要重新计算位置的地方,初始化init
    uiSlide.init()

bui.mask 问题

pullrefresh,list,scroll 等控件里面有 dropdown 跟遮罩的时候,默认正常,当下拉的时候,遮罩会覆盖掉下拉菜单.

原因:
transform 会更改定位的层级

解决方案:
监听下拉菜单展开的时候, 设置

$(".bui-scroll-main").css({"transform":"none"}); 

bui.list 问题

1. 问题描述:

list控件的底部出现 正在加载及最后一页的效果.

原因:

list控件被初始化2次,或者同一个ID被多个控件初始化导致的问题. 为什么要初始化2次? 其实开发者是想使用list控件的数据及想使用scroll的下拉刷新方法, 那我们可以使用控件的widget调用内部控件的方式.

解决方案:

var scrollWidget = uiList.widget(“scroll”); 
scrollWidget.refresh();

2. 问题描述:

上下间隙不一样,高度垂直居中问题

原因:
分情况,当列表里面只有字体或者字体图标时, 同样是.1rem 的padding-top 和 padding-bottom; 得出来的结果是 padding-bottom 的空白会比顶部的间隙大, 原因是手机的字体会有底部间隙,这个间隙通过dpi的缩放以后会被放大, 也就是手机看效果的时候可以明显看出差别, 这个的表现 IOS是从字体顶部开始, 华为也是从字体顶部开始, mx5 是从字体中的一部分开始算padding, 共同点是底部都有适当的留白占位.

解决方案:

方法1: 经过仔细修改及确认,如果是字体或字体图标的列表, 设置为padding-top:.1rem 需要设置 padding-bottom:.07rem; 如果是设置 padding-top:10px; 需要设置 padding-bottom: 9px; 这样看上去的效果就基本垂直居中了.

方法2: 如果是单行,可以通过设置 height 及 line-height 的方式, 这种就不会有这个字体居中问题.

键盘问题,输入法问题

1. 问题描述:

列表只有显示一半问题, bui.searchbar 跟list 使用的时候, 聚焦以后,会导致list的高度变矮.

原因:
list 在不传高度或者高度为0的时候,会自动计算剩余的高度,这样就会导致当聚焦的时候,弹出键盘,又计算了一次高度.
解决方案:
先计算list的高度,再传进去,下次就不会计算了.

2. 问题描述:

登录的时候,点击登录按钮,跳转过去的页面只有一半高度

原因:
因为页面跳转过去的时候,键盘还没有收起来,导致页面计算错误.
解决方案:
1. 判断页面是否有焦点, document.hasFocus() , 有的话先 document.activeElement.blur() 以后再跳转, 这种部分跳转快一点也会有问题.
2. 一种是从登录页面获取正确的页面高度, 然后把高度传过去第2个页面, 执行一次初始化 bui.init(windowHeight) windowHeight 便是要传过去的高度.

3. 问题描述:

按键盘的左右切换输入框焦点时,会导致页面如果有slide出现错位现象.

场景如下: bui.slide 选项卡里面有多个TAB, TAB里面都有输入框, 这样iphone的输入法会有个切换聚焦按钮(左右或者上下箭头),会导致slide位移不准确.

原因:
iphone的输入法比较智能,会检测页面多少个输入框,然后点击箭头自动跳到下一个焦点

解决方案:
需要修改input的disabled状态, 监听to事件,触发移除input的disabled状态

uiSlide.on("to",function(){
    var index = $(this).index();
    console.log(index)

    // 移除当前页的 input disabled 状态
})

表单的后退2次问题

1. 问题描述:

场景类似如下: 输入表单信息,提交以后–>跳转到成功提醒页–>然后点击跳到表单页.这时内容页如果点击后退键, 点击会后退到提醒页, 如何删掉上一层?

原因:
页面的跳转是两个webview进行的

解决方案:
bui.load({ url:”“, replace: true }); 页面跳转到成功提醒的时候,使用替换的方式,这样后退的时候,就会后退到之前的页面.

全局修改问题

1. 问题描述:

对话框的按钮默认全部是左边取消,右边确定, 有没有办法更改过来?

原因:
最早的时候, 都是统一左边取消,右边确定的, 但是现在是全部相反, 那有没有办法更改过来呢?

解决方案:
一种是一个一个修改,当然这个并不是我们想要的,我们需要一个全局配置的东西, 所有的按钮就全部都更改过来了.

bui.config.confirm = {
    buttons: []
} 

所有的控件都支持全局修改默认参数.

如何做一个弹出表单?

1. 问题描述:

能否直接使用 confirm 来做表单呢?

原因:
confirm 是一个封装的文本提醒消息对话框,刚好有取消跟确定按钮. 虽然说是文本提醒消息,但也支持直接使用html标签. 所以部分同事会基于这个来改造, 但往往不方便定制.

解决方案:
alert,confirm 都是基于dialog控件而来, 所以你完全可以参考bui.dialog.html 的实现方式,自定义对话框的内容. 这样会更方便内容定制.

SSO问题

SSO请求不到数据问题

原因:
公司的SSO需要在同一条线路里面, 例如使用link的sso, 那就需要在link里面进行调试.

解决方案:
使用LINK调试.