I’ve been working on a mobile project recently, and I’ve made a lot of mistakes.

  • Wechat webpage development to switch TAB to update the navigation bar title

    For common usedocument.titleTo dynamically modify the page title in JS, used in wechat web developmentvue-wechat-titleThis package to implement

    <router-view v-wechat-title="$route.meta.title" />

Since wechat browser only initializes the title when the page is first loaded, it no longer listens for the change event of window.title. Therefore, after manually modifying the title, you need to create a request, load an empty iframe and remove it immediately, so there is no impact on the page, but in this way, the title on wechat browser will be refreshed. The code is as follows:

setDocumentTitle (title) {
  var i = document.createElement('iframe');
  i.src = '.. /img/xxx.png';
  i.style.display = 'none';
  i.onload = function() {
    setTimeout(function(){
      i.remove();
    }, 0)
  }
  document.body.appendChild(i); 
}
Copy the code
  • IOS Pull back Soft keyboard When you enter content in iOS, the soft keyboard pops up, and the overall page content moves up. However, the page content does not slide down when the keyboard is folded up. There are fixed positioning elements in the page. When the input box within the element is in focus, the soft keyboard placeholder pops up. When the input box is out of focus, the soft keyboard disappears but the placeholder is still there.
<input @blur.prevent="changeBlur()"></input>
changeBlur() { const u = navigator.userAgent const isIOS = !! u.match(new RegExp(/(i[^;] +; ( U;) ? CPU.+Mac OS X)/))if (isIOS) {
    setTimeout(() => {
      const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
      window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    }, 200)
  }
}
Copy the code

  • StickyFooter a page effect where the footer is fixed at the bottom of the browser window if the page content is not long enough; If the content is long enough, the footer is fixed at the bottom of the page.

    • Padding + Absolute positioning
    html, body {
  height: 100%;
}
.wrapper {
  position: relative;
  min-height: 100%;
  padding-bottom: 30px;
  box-sizing: border-box;
}
.footer {
  position: absolute;
  bottom: 0;
  height: 30px;
}
Copy the code
    • cal
    .content {
  min-height: calc(100vh - 30px);
}
.footer {
  height: 30px;
}
Copy the code
    • flex
    html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
Copy the code

  • Text overflow ellipsis

    display: -webkit-box; // Display overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; // Set or retrieve the arrangement of the child elements of the flex box object -webkit-line-clamp: 2;Copy the code

  • ** The input tag has an inner shadow under ios **

    input {
  -webkit-appearance: none;
}
Copy the code

  • The input tag placeholder is not centered vertically in ios

    input {
  line-height:normal;
}
Copy the code

  • Input is bidirectionally bound to Vant’s NumberKeyboard after preventing native keyboards from popping up

    event.preventDefault()
Copy the code

  • Textarea placeholder is centered horizontally and vertically

    textarea::-webkit-input-placeholder { line-height: 100px; //textarea height text-align: center; }Copy the code

  • Letters or digits too long beyond the parent element do not fold

    word-break:break- all or word - wrap:break-word
Copy the code

    The difference between the two is whether the long words at the end of the line are split. Word-break :break-all splits the long words, while word-wrap:break-word does not split the long words, and displays them on the next line

  • Replace (/-/gi, ‘/’); replace(/-/gi, ‘/’);