This blogger in a personal mobile terminal project, encountered such a demand: hope that their project, the head of navigation of the effect can be like today's headlines as scroll sideways!
For such effect, almost everywhere in the major mobile terminal project, and why?
We all know, for a mobile terminal that is on the phone, the width of our pages is not as big as the PC side, you can display the navigation very long term, but for our mobile terminal, because the expansion of functions, or business segments often navigation items will increase, and mobile terminal display width of a page in a row, it will appear navigation items wrap phenomenon, though it has such a layout, but once the navigation items increased to a certain extent when the once over, our page (Home) the navigation items are occupied, so that not only affects the display of the key elements also have a great impact on the degree of user experience! Therefore, in order to address these issues, the emergence of horizontal scroll bar, the main benefits are as follows:
- There is no doubt that a good user experience: Users can according to their needs, slide navigation mode to choose their own way
- Easy to manage and maintain
- So that the page becomes more beautiful
- Highlight the main business
So such a good user experience, then the practical effect is how to achieve it?
In order to adhere to the "non-repetition-create the wheel, carry out reform and innovation on the basis of understanding research on wheels" principle, I chose the team drops open source framework - cube-ui
Official documents address cube-ui framework: https://didi.github.io/cube-ui/#/zh-CN/docs/introduction
Before you start to realize, this blogger also stepped on a lot of pit ah, Tucao not say that more are tears ah! Enter the following themes:
Components cube-ui provided, there are a Scroll of components, it is based on a better-scrollcarried component of the package. The implementation principles I will not go into too much, or usually get to see the documents related to the effect of over-we all know.
Probably an HTML structure is: a big box set of two small boxes, is a scrolling navigation, and the other is additional expansion (does not affect this effect can be ignored)
1 <div class="nav-scroll-list-wrap">
2 <cube-scroll ref="navScroll" direction="horizontal">
3 <ul class="nav-wrapper">
4 <li v-for="(item, index) in labels" :key="index" class="nav-item">{{ item }}</li>
5 </ul>
6 </cube-scroll>
7 <div class="search-icon">
8 <span class="iconfont icon"></span>
9 </div>
10 </div>
I said here is under labels incoming data entry navigation, is a local mock data, a total of eight
Style section: Here is the key to achieve! Because for Scroll component content element .cube-scroll-contentlength in the rolling direction must be greater than the container element, divided into vertical scrolling and horizontal scrolling, horizontal scrolling is implemented here, the principle is similar vertical, depending on the direction of scrolling take different styles.
1 .nav-scroll-list-wrap 2 position relative 3 padding-right 120px
Style big box portion is almost no effect on the demand, this is to say the main, is set to relative positioning element for positioning the child, the child must parent phase, while the inner margins are part of the location to make room for absolute positioning the child element (the search icon), and this was also a key layout techniques and rolling, why do you say?
First, the layout Tip: You can make part of the location to expand functional items used, followed by expansion of functional items can solve the problem because of the increased z-index and the navigation key to scroll the last obscured;
The key rolling: Without the padding, then the width of my eight navigation items will not be greater than that occupied by the container element, which appears not scroll phenomenon, and this is just padding appears possible to reduce the container element width, then as long as the navigation items sufficient and a lot of content elements can be achieved is that the length in the rolling direction is larger than the container element, but if at the beginning of the project, navigation item is too small, only four or five of the case is not recommended this method is generally adopted which case conventional solutions: length width based navigation array passed by multiplying a value to increase the dynamic content elements specific approach:
1 <cube-scroll ref="navScroll" direction="horizontal"> 2 <ul class="nav-wrapper" :style="{width:navWidth+'px'}"> 3 <li v-for="(item, index) in navTxts" :key="index" class="nav-item">{{ item }}</li> 4 </ul> 5 </cube-scroll>
1 methods: { 2 widthComputed() { 3 this.navWidth=this.navTxts.length*520 4 } 5 }, 6 created() { 7 this.widthComputed() 8 }
The rest Style: Basic are described in the official documentation, I change the parts, as I will not go into too much
1 .cube-scroll-content 2 display inline-block 3 .nav-wrapper 4 display inline-block 5 white-space nowrap 6 line-height 80px 7 .nav-item 8 display: inline-block 9 padding: 0 30px 10 font-size 40px
In this way, a horizontal scroll bar is realized, if there is insufficient or the wrong place, welcome to point out, with the exchange to resolve Ha!