preface

Less than a week after the NBA Finals, the World Cup is upon us. Everyone was staying up late watching the game, and I was locked in a dark room writing. After experiencing the convenience of the small program, the previous period of “riding brave war” decisively used the small program to watch. Because the experience is good, and is learning small program knowledge, immediately want to hands-on practice learning about the production of “Tencent sports” small program. So far, just want to say “the choice is good, the process is a long story”, although not all completed, but also encountered a lot of problems, I hope this share can give you help (source).

rendering

(It’s better to start with a wave chart than a dry start.)

Problems and solutions

1. Scroll view component

Let’s look at the development documentation first

• scroll-x

In this project, the home page — the head of the World Cup is a horizontal sliding scrollview component. After setting the scrollx property, the expected effect is not achieved, and each part of the Scrollview is still a line by itself. After a brief search, set white-space: nowrap; Style it so it’s on the same line.

• scroll-y

There are 5 Sroll-view in the NBA game details page, although the content is a little bit small, but still can see the scroll effect.

Similarly, the sroll-y property needs to be set when creating the vertical scrolling effect, as specified in the official documentation

To use vertical scrolling, you need to give the scrollview a fixed height, using WXSS to set height.

So the question is, how can we determine the height of the scroll view if it does not occupy the full screen?

First of all, after fixing the width of the large box containing tabs and the ScrollView, and following the document flow, we can set the scrollView height to 100%. However, after this setting, the scroll view height becomes the height of the big box?? (Black question mark face), the most important thing is that the contents in the Scroll view cannot be fully displayed, which is a headache.

You can use an elastic layout, fix the height of the TAB, and set flex: 1 to the scroll view below. Yes, bugs are always there. As you can see in the image below, the TAB height is significantly smaller, and if the Scroll view has any more content, the TAB will be squeezed to the point of suffocating.

Finally, I had no choice but to gradually adjust the height of the Scroll view to the bottom of the screen, which is not too rude. The disadvantage is that the effect is different when viewing on devices with different screen sizes. If there is a leader can provide a better solution, please advise.

Swiper component

Development documentation is a good friend. Let’s take a look.

The Swiper component is very common in small applications. It can show more content in a limited area, and it can also increase the visual dynamics of a page. (But even good things have their groove.)

1) As can be seen from the above GIF, THE SWIper component is also used in the DETAILS page of NBA games and is bound to the navigation in the head. Swiper can change the status of the navigation bar by swiper, and swiper-item can be switched by clicking the navigation bar option. This implementation is relatively simple, with the following steps:

• indataAdd a variable representing the subscript tocurIndex;
• Bind this variable to the options in the navigation bar, using a ternary operatorwx:ifConditional rendering, ifcurIndexEquals the subscript of the current option, add a pseudo-element at the bottom to indicate that the option is selected;
• willcurIndexBound to theswiperthecurrentProperty, through the TABbindtapEvents andswiperthebindchangeReal-time Event switchingswiper-item.

Without further ado, paste code:

//nbaMatches.wxml
<view class="info_hd">
    <view class="headerMenu {{curIndex===index? 'on':''}}" 
        wx:for="{{nbaMenu}}"
        data-index="{{index}}" 
        bindtap="switchSort">
        <view class="nbaSort">{{item.nbaSort}}</view>
    </view>
</view>
<view class="info_bd">
    <swiper current="{{curIndex}}" bindchange="bindswiper">... </swiper> </view>Copy the code

//nbaMatches.js bindswiper(e) { this.setData({ curIndex: e.detail.current }) }, switchSort(e) { console.log(e.currentTarget.dataset.index); this.setData({ curIndex: e.currentTarget.dataset.index? e.currentTarget.dataset.index: 0 }) }Copy the code

2) The project’s “Popular” page also uses a swiper component, which is more complex than normal swiper usage. Instead of swiper interacting with a finite number of options, swiper interacts with an infinite number of dates. 365 swiper-items for 365 days a year? The old man’s body shook with fear.

After a “pig brain” storm, I still couldn’t come up with a perfect solution, so I had to set up a limited number of swiper-items to initially achieve the desired effect.

Or post code!

// Swiper's bindchange event changeMatch(e) {const current = e.daile.current; // Get current position const befInd = this.data.swiperCurIndex; Const index = current-befind;if(index <= -1) {this.preday (); // Change the date to the previous day}else if(index >= 1) { this.nextDay(); // Change the date to the next day}else {
      return}}Copy the code

The nextDay() method is similarpreDay() {
    let day = this.data.day;
    let month = this.data.month;
    let week= this.data.week;
    let i = this.data.i;
    if(I <=0) {// Cycle from Monday to Sunday I = 6; }else {
      i--;
    }
    if(day<=1) {// On the first day of the month, change the date to the last day of the month--; day = this.data.daysCountArr[month-1]; }else{ day--; } this.setData({swiperCurIndex: this.data. SwiperCurIndex -1, month, day, I, week: this.data.weekArr[i], curDate: month+'month'+day+'day'+' '+this.data.weekArr[i]
    })
  }
Copy the code

If the leaders have a solution, welcome to discuss. A detailed view of the code is available here.

3. Tabs

Dear lulu! You’re talking about tabs? (Laughing and crying) Let me explain.

Usually we use 2 to 4 options in the TAB, if you don’t bother, we just write the TAB and its corresponding content in.wxml. However, once the options become numerous, if you write them out one by one, the code in.wXML will look like “slattern’s feet”. At this point, it is necessary to use wx:for to loop out the options. Also, it would be nice if the content in each option was similar, and the id of the current option could be obtained from the TAB’s click event, using wX :if conditional rendering based on the ID to determine the data to be displayed on the current TAB. Check out our NBA game details page. The player list on this page includes a TAB with five options.

A detailed view of the code is available here.

4. Customize calendars

For a better experience, sports events are always added to the calendar so that users can check the schedule. With the Picker component, the user experience might be poor, so how do you customize a calendar? After referring to the methods of various gods, the following analysis is obtained:

• Can switch month and display month calendar. Tencent sports official mini program calendar can slide left and right to switch, similar to the “hot” page. It is not used here because there is no solution yetswiperComponents. The date of the month in the calendar body is a two-dimensional array, and the number of weeks of the month is the length of the array, so the date output in WXML needs to be two-foldwx:for. Part of the code is as follows:

<view class="calendar_box" wx:for="{{dateList}}"  wx:for-item="week" wx:key="{{index}}" style="{{index==0? 'justify-content: flex-end; ':'}}">
    <view wx:for="{{week}}" data-date="{{item}}" 
        class="weekday_label {{item.value==selectedDate? 'active_label':''}}" bindtap="selectDate">
        <view class="date">
            <text>{{item.date}}</text>  
        </view>
        <view class="gameNumBox">
            <text class="gameNum"> {{item. GameNum}} < / text > < text > game < / text > < view > < view > < / view >Copy the code

• By default, the date of the day is highlighted. Click the date to highlight. This is relatively simple to implement, just get the current click date by clicking the event, in.wxmlThe trinary operator is used to determine whether the retrieved date is the same as the date in the data to achieve the effect of highlighting.
• Return to today. Click “Back to Today” to return to the “Popular” page and display the day’s events. Use applets with their own API —wx.navigateBack(OBJECT)Can return to the previous page, the following is a screenshot of the document:
  

  

  It is worth noting:

Wx. navigateTo and wx.redirectTo do not allow you to jump to a Tabbar page. You can only jump to a Tabbar page using wx.switchTab

conclusion

Since it was the first time to write a project and the relevant knowledge reserve was not enough, there were more than these problems encountered since the beginning of the project, but the process of solving the problems was hard and fun. At present, there are still many parts of this project that have not been implemented, but it will be updated continuously. If you are interested, welcome to discuss. After that, I will fully learn MPVue and WEPY small program framework. If I use the framework to write this project, I believe it will be easier. If I have the opportunity to write an MPVue version.

My project is right here.