“This is the 8th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

Use full-screen preview for H5 page

Recently, we need to jump to the H5 page in wechat mini program. In the H5 page, we need to preview the picture because we do not use the third-party component library. I can only write by hand, but time is tight. So you can only look for third-party plug-insCopy the code

The use of vue – photo – preview

<! <script SRC ="vue-photo-preview.js"></script> <! <div class="img-bolick showlistimg"> <! <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: Use (vuePhotoPreview, options) var vm = new Vue({el: '#app', data: Return {listimg:[]}}, mounted() {// SetTimeout (() => {//listimg is the data source displayed on the view 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'] / / preview thus ok the vm. $previewRefresh ()}, 1000); }, this.$preview.on('imageLoadComplete', (e, item) => { console.log("xxx", e, item ) // console.log(this.$preview.self) }) }, }Copy the code

Disallow the page under the mask to scroll required images

Most of the time, we need to let the user select the drop-down box and select the corresponding option. When you pop up the mask, you can actually scroll through the page underneath the mask, which is not a friendly experience at all, so we need to optimize it. When the mask pops up, 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, BodydiableScroll(true) BodydiableScroll(true) BodydiableScroll BodydiableScroll(false)Copy the code

How to set font pixel on mobile terminal

<script type="text/javascript"> (function(doc, win) { var docEl = doc.documentElement, HTML resizeEvt = 'orientationchange' in window? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; // Get the screen width if (! clientWidth) return; // On mobile we usually adjust the width of the design to 375. // So we divide 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> If you just set it like this. You'll find that your pixels won't work on mobile. Because your viewport is not correct. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, Minimum-scale =1.0, viewport-fit=cover" > < span style = "max-width: 100%; clear: both; min-height: 1ptCopy the code