Hello everyone, xiao Wen is here again. Haven’t come to record their study daily for a long time!

I. UI and interaction

First of all, let’s have a look at the UI appearance and interaction effect to be realized. The picture below is one of our entrances. Click into each icon area below and the corresponding card display will be displayed.

For example, when I click the icon tab2, the corresponding jump will be as shown in the picture below.

The head of the page is a long TAB bar, which can be slid left and right. Blank areas should be left on both sides to achieve the effect that the tabs at both ends can be centered. Click the corresponding TAB to display the corresponding card, and the text of the TAB will be centered. Similar to the effect of a left/right toggle in a multicast image, I think this interaction should be easy to imagine as a user.

Currently active cards have an effect that feels slightly larger than other cards, and the edges of the front and back cards are visible. The card area can also be swiped left and right to achieve the same interaction effect as the TAB bar in the head.

This is probably an interactive effect.

Second, the design of the implementation scheme

  1. The first thing we need to know is whether all the tabs that are displayed on the front end are going to be displayed as many as they are all the time, or whether there is a chance that they will be expanded later, or maybe they will be iterated on. I personally think we can work with the back end to unify what we need to show into a constant configuration, and then we can do our dynamic rendering. I’m basically maintaining a constant like this here.
data: [
  {
    title: 'tab2'./ / title
    logoUrl: 'xxx'.// Icon address
    isNeed: false.// Whether the TAB is required
    id: ' '.// An ID for each TAB, used interactively with the back end
    content: ' ' // Each TAB corresponds to some content for extension. }]Copy the code

It’s a data structure that looks something like this.

  1. Click the corresponding icon at the entrance to bring the corresponding array index or ID into the details page, so as to realize the corresponding card display and corresponding UI

  2. In the design of the detail page, I split the page into two components for presentation.

  • Header is the corresponding scroll TAB component. In this component, I use the component scroll view provided by wechat applet. Here, we need to set the parameter of scroll x to enable it to slide left and right. Set the scroll left parameter so that when we click on a TAB or slide card, we can scroll to the center.
  • Content is the corresponding swiper-card component. In this component, I used the component swiper provided by wechat mini program. Here, we need to set previous-margin and next-margin properties to set the distance between the current card and the two cards before and after. The current property sets the card currently displayed, and the bindchange event is used for card switching interactions.
  • I choose to pass the corresponding data as well as the current value and event handler function
<view>
    <scroll-tab data="{{data}}" current="{{current}}" bind:chooseDetail="handleChooseDetail" />
    <swiper-card data="{{data}}" current="{{current}}" bind:swiperChange="handleSwiperChange" />
</view>
Copy the code
  1. The specific implementation
  • For the TAB bar of the Header, leave some space for sliding, because elements inside the Scroll view cannot fill the width of the TAB, so there is no way to set it to 100%. The idea here is to put a blank element before and after it to give it a width, and then use a page-meta component to set the left and right padding, but there will be page-meta only for the first node of the page warning. For the setting of the distance between the two sides, and the scroll left setting, I used the following method.
wx.getSystemInfo({
          success: res= > {
            this.marginWidth = res.windowWidth / 2 // Blank space on both sides}})const computedPosition = (margin, textArr, preWidthArr) = > {
  // margin Specifies the distance between each TAB
  // textArr is an array of text widths for all tabs
  // preWidthArr is the array of distances between each TAB and the previous TAB. The first TAB defaults to 0
  let distanceArr = []
  letlen = textArr? .lengthfor (let i = 0; i < textArr? .length; i++) { distanceArr.unshift(preWidthArr[len -1] + (len - 1) * margin + textArr[len - 1] / 2)
    len--
  }
  // distanceArr specifies the scrollleft value that should be set for each TAB display centered
  return distanceArr
}

// textArr[n] = width of element n-1
// const widthArr = [78, 78, 78, 52, 52, 52]

// preWidthArr[n] = n - 1 TAB distance from the previous TAB = element width + margin
// The first TAB has no previous elements
// const arr = [0, 78, 156, 234, 286, 338]

// Get the element information
getElementAttr() {
        wx.createSelectorQuery()
          .in(this)
          .selectAll('.swiper-text__item')
          .boundingClientRect(res= > {
            consttextWidth = 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; i++) {
          arr.push(textWidth[i] + arr[i])
        }
        return arr
}
Copy the code
  • For a card in the Content area, you can give the current card a different transfrom: Scale and a transition effect to achieve a simple interaction effect.

Three, the success is accomplished, start to resume

  • The scroll-left of the scroll-view has been stomped on something that doesn’t work
  • The content area of the Scroll View does not hold 100% of the width
  • How to set the scroll left distance according to the width of TAB text
  • How to achieve left and right sides set aside slippable area
  • How to make the interaction smoother and friendlier

Write in the last

Recently, when I meet the requirements as the owner, and a colleague for the needs assessment scheduling time editorial is 10 person, I also want to try so naturally chose the UI with the content of interaction is more complex, and of course in order to realize the content of the above is just one of the parts, to be honest I really very painful in the process of implementation, Progress bar shows there are still one and a half arc shape, the a fore and aft should have radian, as a fresh white, there are so many things not, even these in their eyes as simple content, it can realize the content, here I can go through too much, I know my food, but I will continue to work hard, as a front-end developer, It has always been my original intention to achieve UI design draft with high degree of reduction. But I hope you don’t pua me with the tone that I XXX (how long) can make, at least I think I will be better than you in a few years, but certainly not with such tone to my fresh colleagues.