Shulou(Shulou.com)06/02 Report--

This article mainly introduces how Mini Program to achieve tab card switching function, the article is very detailed, has a certain reference value, interested friends must read it!

1. UI and interaction

First of all, let's take a look at the ui look and interaction to be implemented. The following figure is one of our entrances, and each icon area below will show the corresponding card when clicked in.

For example, when I click on the icon of tab2, the corresponding jump goes to the figure below.

The display of the page is that the head is a long tab bar, which can be slid left and right, and blank areas need to be left on both sides to achieve the center effect of the tab at both ends. Click the corresponding tab to display the corresponding card, and the text of the tab will be displayed in the center. Similar to the effect of switching between left and right of the roulette, I think as a user, it should be easy to think of this kind of interaction.

The currently active card will have an effect that feels slightly larger than other cards, and the edges of the front and rear cards can be seen. And the card area can also slide left and right to achieve the same interactive effect as the head tab bar.

It is probably such an interactive effect!

Second, the design of the implementation scheme

1. First of all, we need to know whether all the tab displayed at the front end are always shown in this way, or is it possible to expand later, or to iterate over it. Personally, I think we can discuss with the back end, unify the content we need to display into a set of constant configuration, and then we can make our dynamic rendering. I have probably maintained such a constant here.

Data: [{title: 'tab2', / / title logoUrl:' xxx', / / icon address isNeed: false, / / whether an id corresponding to each tab is needed, and interact with the backend to use some content corresponding to content:''/ / each tab to extend.}]

It is roughly one of the above data structures.

2. When you click the corresponding icon at the entrance, you can bring the corresponding array index or id to the details page to realize the corresponding card display and the corresponding ui.

3. In the design of the details page, I divided the page into two components to display.

Header is the corresponding scroll-tab component, in which I use the component scroll-view provided by WeChat Mini Programs. Here we need to set the parameters of scroll-x to enable it to slide left and right, and set the parameters of scroll-left to enable us to scroll to the middle when we click on a tab or slide card.

Content is the corresponding swiper-card component. In this component, I use the component swiper provided by WeChat Mini Programs. Here, we need to set the previous-margin and next-margin attributes to set the distance between the current card and the front and back cards, the current property to set the card currently displayed, and the bindchange event to be used for the interaction during card switching.

I choose to pass some data, current values and event handlers for passing parameters to the index page.

4. Concrete realization

Leave sliding space on both sides of the tab bar of the Header, because the internal elements of the scroll-view cannot fill the width of the tab, so we have no way to set it to 100%. The idea I started here is to put a blank element before and after it to give its width implementation, and then refer to some writing method that uses page-meta, which I am not quite sure about, to set around the padding to achieve, but there will be page-meta only used for the warning of the first node of the page. For the setting of the distance between the two sides, and the setting of scroll-left, I use the following methods.

Wx.getSystemInfo ({success: res = > {this.marginWidth = res.windowWidth / 2 / / Blank distance}}) const computedPosition = (margin, textArr, preWidthArr) = > {/ / margin the spacing between each tab / / textArr is the array of text widths of all tab / / preWidthArr is the array of distances between each tab and the previous tab The first one defaults to 0 let distanceArr = [] let len = textArr?.length for (let I = 0 I

< textArr?.length; i++) { distanceArr.unshift(preWidthArr[len - 1] + (len - 1) * margin + textArr[len - 1] / 2) len-- } // distanceArr为每个tab居中展示时应该设置的scroll-left值 return distanceArr}// textArr[n] = 第 n - 1元素的宽度// const widthArr = [78, 78, 78, 52, 52, 52]// preWidthArr[n] = 第n - 1个tab距离前面tab的距离 = 元素宽 + margin// 第一个tab没有前面的元素// const arr = [0, 78, 156, 234, 286, 338]// 获取元素信息getElementAttr() { wx.createSelectorQuery() .in(this) .selectAll('.swiper-text__item') .boundingClientRect(res =>

{const textWidth = res?.map (item = > item.width) const preWidth = this.getPreWidth (textWidth) this.distanceArr = computedPosition (MARGIN, textWidth, preWidth)}) .exec ()}, getPreWidth (textWidth) {const arr = [0] for (let I = 0; I < textWidth.length-1 Return arr +) {arr.push (textwidth [I] + arr [I])} return arr}

For cards in the Content content area, you can set a different transfrom: scale (multiple) for the current card and other cards, and give a transition effect transition to achieve a simple interaction effect.

The above is all the contents of the article "how to achieve tab card switching in Mini Program". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.