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

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:

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

    
• {{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  class="rotate lazy" src="/static/imghwm/default1.png" data-src="../assets/img/refresh.png" 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);
          }
        }

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

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

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>`)

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>`)

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;
        }

js part:

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

Recommended related articles:

vue command What is the difference between operating DOM and $nextTick?

Detailed explanation of the usage of events in vue to prevent bubbling

The above is the detailed content of Vue implements the function of imitating the home page tab of Toutiao. For more information, please follow other related articles on the PHP Chinese website!