Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to achieve the horizontal scrolling navigation bar similar to the headline effect in Vue.js+cube-ui". The editor shows you the operation process through an actual case, the operation method is simple and fast, and it is practical. I hope that this article "how to achieve the horizontal scrolling navigation bar similar to the headline effect in Vue.js+cube-ui" can help you solve the problem.

Such an effect can be seen almost everywhere in major mobile projects. Why?

As we all know, for the mobile end, that is, on the mobile phone, the width of our page is not as large as the PC side, which can display very long navigation items, but for our mobile end, due to the expansion of the function, or the subdivision of the business, often the navigation items will increase with it. Once the display width of the mobile page on a line is exceeded, there will be line wrapping of navigation items, although there is also such a layout. But once the navigation items increase to a certain extent, our page (home page) will be occupied by navigation items, which not only affects the display of key content, but also has a great impact on the experience of users! Therefore, in order to solve this related problem, there is a horizontal scroll bar, which has several main benefits:

There is no doubt that the user experience is good: users can choose their own way by sliding navigation according to their own needs.

Easy to manage and maintain

Make the page more beautiful

Highlight the main business

So how does such a good user experience and then practical effect come true?

Among the components provided by cube-ui, there is a component of Scroll, which is encapsulated based on better-scroll. The principle of its implementation I will not repeat too much, to see the document or usually have done the relevant effect of everyone knows.

An approximate HTML structure is: a large box with two small boxes, one for scrolling navigation and the other for additional expansion (which has no effect on the effect and can be ignored)

{{item}} 

Here I say that labels is the navigation item data I passed in, which is a local mock data, with a total of eight items.

Style section: here is the focus of the implementation! Because for the Scroll component, the length of the content element .cube-scroll-content in the scrolling direction must be larger than that of the container element, which is divided into vertical scrolling and horizontal scrolling. Here, horizontal scrolling is realized, and the longitudinal principle is more or less the same, depending on the scrolling direction to take different styles.

.nav-scroll-list-wrap position relative padding-right 120px

The style of the large box has almost no effect on this requirement. The main point here is to set it to relative positioning for the positioning of child elements, and the inner margin is to make room for some of the child elements that use absolute positioning (search icon). At the same time, this is also a key to layout skills and scrolling, why do you say so?

First of all, layout skills: part of the space can be vacated for the expansion of the function item, and then the problem that the expansion of the function will cover the last navigation item of the scroll due to the addition of z-index can be solved.

The key to scrolling: if there is no this inner margin, then my eight navigation items will not be larger than the container element according to their width, thus the phenomenon of unable to scroll occurs, and the appearance of this inner margin can just reduce the width of the container element. then as long as the navigation item is sufficient and quite a few cases, it is possible to achieve that the length of the content element in the scrolling direction is greater than that of the container element, but if at the beginning of the project This method is not recommended when there are only four or five navigation items. In this case, the traditional solution is to dynamically increase the width of the content element by multiplying the length of the navigation array by a numeric value.

{item}} methods: {widthComputed () {this.navWidth=this.navTxts.length*520}}, created () {this.widthComputed ()}

Other styles: it is basically explained in the official documents. I have changed some of them. I will not repeat the details too much.

Cube-scroll-content display inline-block. Nav-wrapper display inline-block white-space nowrap line-height 80px. Nav-item display: inline-block padding: 0 30px font-size 40px about "how can Vue.js+cube-ui achieve a horizontal scrolling navigation bar similar to the headline effect"? thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.