前端日常开发问题记录分享（一）在华为荣耀浏览器中，点击确定，地区没有选上，找了半天方法，官方issues也提过问题。这个

1、Ant Design Mobile的picker在华为荣耀浏览器的兼容问题

在华为荣耀浏览器中，点击确定，地区没有选上，找了半天方法，官方issues也提过问题。这个问题，目前解决的方案，就是让点击选择的时候让浏览器全屏，这也是一位技术友在github上回复的，github.com/ant-design/…

浏览器全屏代码如下：

 if (navigator.userAgent.toLowerCase().indexOf('huawei') !== -1) {
            document.body.addEventListener('click', () => { setFullScreen(document.documentElement); });
        }

export function setFullScreen(element) {
    let requestMethod = element.requestFullScreen ||      element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
    if (requestMethod) {
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== 'undefined') {
        let wscript = new window.ActiveXObject('WScript.Shell');
        if (wscript !== null) {
            wscript.SendKeys('{F11}');
        }
    }
}

2、在使用picker的同时，如果前一个input是text类型，在掉起键盘后，未关闭键盘的情况下，去选择picker,页面会有闪烁的情况。

此问题，是因为定位导致的，键盘掉起，页面的scrollTop值就不是0了，我解决的方法是设置scrollTop为0

在点击所有选择picker的地方，都设置body的scrollTop为0：代码如下：

document.body.addEventListener('click', this.blurFun);
blurFun = (event) => {
        if (event.target.readOnly) {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
}

3、利用swiper实现类似于新闻导航效果

点击一个导航，如果显示不全，则左滑，一段距离。项目架构是react，因此我们用的是封装后的swiper插件：react-id-swiper，代码如下：

// 设置swiper的属性
const params = {
        slidesPerView: 'auto',
        spaceBetween: 0,
        slideToClickedSlide: true,
        initialSlide: activeIndex, // 默认的index
        slidesPerGroup: 2,
        slidesOffsetBefore: 1,
        normalizeSlideIndex: false
};
<Swiper {...params}>
    {item}
</Swiper>

首次在掘金分享，日后有更多的经验，都会拿出来分享给大家，写的不对的地方，望多多指教。