Vue implements the function of imitating the home page tab of Toutiao-JS Tutorial-php.cn

Vue implements the function of imitating the home page tab of Toutiao

不言

Release： 2018-08-04 11:52:25

Original

4408 people have browsed it

This article introduces you to the function of Vue to imitate the home page tab of Toutiao. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In order to increase experience in mobile terminal projects, I have imitated Toutiao through vue in the past week. The following is a summary of the problems encountered during the implementation of the project and the solutions.

1. Implementation of functions

Home page display
View messages
Lazy loading of pictures and texts
Slide the tab to switch channels, click on the channel to switch to different news
Click on the tab button to add and delete channels
Click the search button, enter keywords, and press Enter to perform real-time search, and highlight the keywords in the results
Clicking the refresh button of the navigation bar only realizes the rotation effect of the button, and does not realize the page refresh loading function

2. Function Summary

2.1 The tab is encapsulated as a component. The effect of sliding the tab is as follows:

Vue implements the function of imitating the home page tab of Toutiao

Using elastic layout, part of the code is implemented as follows:

Copy after login

{{item.title}}

2.2 Problem: When img is arranged horizontally and set display:inline-block, there is a default gap
Solution: Add font-size: 0 to the parent element;

2.3 Problem: vue entrance The file main.js does not work when introducing the vuex store
Solution: store cannot be capitalized

2.4 Problem: When the mobile terminal implements device adaptation by controlling the "font-size" value of the root element , block-level elements always have a default width
Solution: My understanding is that because the root element always has the value of "font-size", the block-level element inherits "font-size", so reset it to "font-size" -size" to change the height of the element.

2.5 Problem: Click on an element, and the element rotates 360°
Solution:

     类rotate实现旋转动画
     <img  alt="Vue implements the function of imitating the home page tab of Toutiao" >
     
      .rotate {
          -webkit-transform-style: preserve-3d;
          -webkit-animation: x-spin 0.7s linear;
        }
        @-webkit-keyframes x-spin {
          0% {
            -webkit-transform: rotateZ(0deg);
          }
          50% {
            -webkit-transform: rotateZ(180deg);
          }
          100% {
            -webkit-transform: rotateZ(360deg);
          }
        }

Copy after login

2.7 Problem: Components are loaded on demand (see references for other methods)
Solution:

 {
                path: &#39;/promisedemo&#39;,
                name: &#39;PromiseDemo&#39;,
                component: resolve => require([&#39;../components/PromiseDemo&#39;], resolve)
            }

Copy after login

2.8 Problem: Real-time search based on vue, highlight keywords in the results
Solution:

 万能的"replace"函数, searchKey 为关键字
     title = title.replace(this.searchKey, `<span style=\"color: red;font-weight: 500;\">${this.searchKey}</span>`)

Copy after login

2.8 Problem: Real-time search based on vue , highlight the keyword
in the results Solution:

    万能的"replace"函数, searchKey 为关键字
     title = title.replace(this.searchKey, `<span style=\"color: red;font-weight: 500;\">${this.searchKey}</span>`)

Copy after login

2.9 Problem: Solve the problem of the input label being blocked on the Android platform. When the user clicks the input, the parent element moves up, and other The elements remain unchanged. There is no such problem under ios.
Solution:
css part:

      body{
            width:100%;
            height:100%;
            overflow:scrool;
        } 
        .container{
            width: 100%;
            height: （这里随意，需要用js设定）;
            position: absolute;
            top: 0;
        }

Copy after login

js part:

       var winHeight = document.documentElement.clientHeight;
        $(&#39;.container&#39;).css(&#39;height&#39;,winHeight+&#39;px&#39;);

Copy after login