做h5遇见的一些坑

「这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战」

h5页面使用全屏预览

最近需要在微信小程序中跳转到h5页面
在h5页面中需要进行图片预览展示
由于没有使用第三方的组件库。
只能手写，但是时间很紧张。
所以只能够寻找第三方的插件

vue-photo-preview的使用

<!-- 引入这个插件 -->
<script src="vue-photo-preview.js"></script>
<!-- 引入这个插件的css -->

<div class="img-bolick showlistimg">
    <!-- 非常重要  preview="1" 的值相同表示是一组可以轮播-->
    <div class="widthimg-box">
        <img class="imgwh" preview="1" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
    </div>
    <div class="widthimg-box">
        <img class="imgwh" preview="1" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
    </div>
    <div class="widthimg-box">
        <img class="imgwh" preview="1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
    </div>	
</div>
</div>

var options = {
    fullscreenEl: true, //关闭全屏按钮
}
Vue.use(vuePhotoPreview, options)
var vm = new Vue({
    el: '#app',
    data: function() {
        return { 
            listimg:[]
        }
    },
    mounted() {
        //异步插入的图片.我们使用点击事件来模拟异步插入图片
        httpsBackData(){
            setTimeout(() => {
                //listimg 是视图上显示的数据源
                this.listimg=[
                'https://img01.yzcdn.cn/vant/cat.jpeg',
                'https://img.yzcdn.cn/vant/apple-1.jpg',
                'https://img.yzcdn.cn/vant/apple-2.jpg']
                //进行预览这样就ok了
                vm.$previewRefresh()
            }, 1000);
        },

        
        this.$preview.on('imageLoadComplete', (e, item) => {
            console.log("xxx", e, item )
            // console.log(this.$preview.self)
        })
    },
}

禁止蒙层下的页面发生滚动 需要图片

很多时候，我们都需要让用户选择下拉框，选择对应的选项。
弹出蒙层的时候，竟然可以滚动蒙层下的页面
这是体验一点都不友好，所以我们需要优化一下。
弹出蒙层的时候，静止页面滚动哈

// 封装禁止页面滚动方法（该方法兼容PC端和移动端）
var topSpace = 0
function BodydiableScroll (isState) {
    var bodyNode = document.body
    if (isState) {
        topSpace = window.scrollY
        bodyNode.style.position = 'fixed'
        bodyNode.style.top = -topSpace + 'px'
    } else {
        bodyNode.style.position = ''
        bodyNode.style.top = ''
        window.scrollTo(0, topSpace ) // 回到原先位置
    }
}
// isFixed true 表示禁止页面滚动，false表示允许页面进行滚动
打开弹窗的时候调用该方法BodydiableScroll(true)
关闭弹窗的时候，BodydiableScroll(false)

移动端如何设置字体的像素

<script type="text/javascript">
    (function(doc, win) {
        var docEl = doc.documentElement, //页面的根元素html
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth; //获取屏幕的宽度
                if (!clientWidth) return; 
                //在移动端我们通常将设计图宽度调整为375.
                //所以我们除的375
                docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
            };

        if (!doc.addEventListener) return;
        recalc();
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

如果你只是这样设置。
你会发现你的像素在移动端是不会生效的。
因为你的视口是不正确的。
你还要添加下面这一行代码
 <meta name="viewport" 
    content="width=device-width, 
    initial-scale=1.0,
    maximum-scale=1.0,
    minimum-scale=1.0,
    viewport-fit=cover"
>
这样你设置视口后，设置的像素在移动端才会正确显示