Problems encountered in app development by imitating Toutiao

The technologies used in this project mainly include vuE-CLI + vuex + MockJS. Making the address

interactivity

• Click the “Add” button on the menu bar to enter the channel management page, and you can add and delete channels
• Click the mailbox picture to the left of header, and the popup box will display
• Click the search button on the right of header to enter the search page and highlight the asynchronous query results
• Channel menu bar switch asynchronous query, corresponding channel news display
• News display lazy loading, showing 10 pieces of data at a time, slide to the bottom and load 10 more.

Display function

This focuses on the empirical issues THAT I felt I would encounter more often in future development as I implemented them

1. You can slide the menu bar horizontally to display redundant content

As shown in the figure:

The method I used here is:

We wrap the ul around a div(.ul-box) that looks like this:

.nav-container .ul-box {
    width: 100vw;
    height: 0.8 rem;
    overflow-x: scroll;
}
Copy the code

Its internal UL looks like this: Use an elastic layout

.nav-container .ul-box .nav-ul {
    line-height: 0.8 rem;
    display: -webkit-box; 
    display: flex;
    height: 0.8 rem;
    margin-right: 0.2 rem;
}
Copy the code

For the second method, use white-space: norwrap

There is no need to change the style of the outermost div above, just the ul style, using white-space: norwrap

.nav-container .ul-box .nav-ul {
    line-height: 0.8 rem;
    white-space: norwrap// Height:0.8 rem;
    margin-right: 0.2 rem;
}
Copy the code

2. News cards. Different types of cards have different layouts

There are four different layouts of the news here

• There is no picture news
• There is a picture of non-advertising news
• Non-advertising news with three pictures
• advertising

As for the four different types of cards, I distinguish them by first I think the data that the backend may give me can only be divided into news and advertisement, so I use a field to judge whether it is news or advertisement, and then I further determine the different layouts of news by judging the number of pictures of the news.

Strange bugs and considerations encountered on the project

1. Adding a click event to router-link does not work

  <router-link @click.native="changeTab(item.id)" :to= "{path: '/home/' + item.id}" tag="a" :data-id="item.id" :class="{selected: curIndex === item.id}">{{item.name}}</router-link>
Copy the code

Here we need to append. Native to the click event, which converts the VUE component into a normal HTML element. Binding native events to vUE components requires. Native modifier V-ON, otherwise registration will not succeed

Float :left, center the middle element. I found that the floating element affects the middle element. The layout diagram looks like this:

A review of the data shows that the out-of-flow element in CSS removes elements from normal layout layout, so that other elements in the page layout ignore the out-of-flow element. But attention is also from the document flow, the floating element or elements and positioning differentiated: floating elements: using the floating element, while the element has been out of document flow, but the page text will still be the other box of banknotes this element positioning elements: other elements in the page will be completely ignored

Example: Using float and absolute positioning for DIV1 respectively has the following effect

<div class="header">
    <div class="left">div1</div>
    <div class="center">div2</div>
</div>
Copy the code

.header .left {
        /* float: left; * /
        position: absolute;
        left: 0;
        background: #f00;
    }
.header .center {
    background: #0ff;
}
Copy the code

float:left;

3. Keyword search highlighting

It starts out as:

let exchangeKey = '<highlight>' + key + '</highlight>'
arr[index].title = arr[index].title.replace(key, exchangeKey)// Key is the user input
Copy the code

I forgot global matching. This point really needs to be considered comprehensively. At the beginning, there were no repeated words in one sentence of the fake data I wrote, so I didn’t find this point until I looked at the regular expression later. Further modified to:

let reg = new RegExp("(" + key + ")"."ig");
arr[index].title = arr[index].title.replace(reg, '<highlight>$1</highlight>')
Copy the code

Now there’s no problem

Router /index.js > router/index.js > router/index.js > router/index.js > router/index.js > router/index.js > router/index.js > router/index.js > router/index.js > router/index.js > router/index.js > router/index.js > router/index.js > router

• hash
• history

5. The use of VUex is not described here, as summarized previously

6. See other summaries for the use of mock

7. Return to previous page

Common ways to return to the previous page are:

• window.history.go(-1);
• window.history.back(-1);

The way to proceed to the next page is:

• window.history.forward()

The above methods will refresh the page. Vuex is used in our project, so refreshing is not possible. Please use the jump of route

“Mock. Js” : “store” : “store” : “store” : “store” : “store” : “store” : “store” : “store” : “store” : “store” : “store” : “store” : “store” : “store” : “store” : “store” : “store” : “store” : “store” : “store” : “store” : “store” : “store” : mock

9. Using mapState, you can only read the value in state, but cannot modify it. Please modify it in actions

No static resource can be found in index. HTML folder after NPM run build dist

Change index.js in config file

11. Lazy loading of news messages is mainly to process by listening to windot. onscroll events. Here, notice that after sliding to the bottom, it will be triggered all the time, which will cause the phenomenon of screen shaking, so I use a canGetMoreList flag bit to judge. CanGetMoreList is true only if the asynchronous request succeeds. The asynchronous request is sent only when canGetMoreList is true.

window.onscroll = function () {
    var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollH = document.documentElement.scrollHeight || document.body.scrollHeight;
    var clientH = document.documentElement.clientHeight || document.body.clientHeight; 
    if (scrollT >= scrollH - clientH && store.state.canGetMoreList) {
        this.pageNum++
        store.state.showMoreFlag = true
        e.state.canGetMoreList = false
        setTimeout (function () {
            this.getList(this.curIndex)
        }.bind(this), 200)
    }
}.bind(this)
Copy the code

Project summary

Doing a complete project each time is like a process of literacy. Only when you meet a problem will you know how ignorant you are and make a plan for your next step of learning:

• Network knowledge
• Regular expression learning
• Configuration learning for Webpack