NBA information mini program is out

As a little program just contact with the front of the bok choy, coincided with the recent NBA in full swing double game seven, the Cavaliers and warriors again and again the peak of the showdown (truth: really tired of watching – -), decided to write a SMALL program to play NBA information. Let’s talk about the development of applets

  • Development tools: VScode wechat developer tools
  • Development technology :(Wxml)Html (Wxss) CSS javascript
  • Development process: Sign up for an AppID and start developing easy tutorials right away

I should also mention that Easy Mock is a persistent service that can quickly generate Mock data, and Iconfont is a site where you can find as many small icon libraries as you want

rendering

How is it possible to be a new writer without some problems

Here are some of the problems I encountered

1. Date match data switch on the home page (that is, the part that can click and slide horizontally)

When I looked at this, I thought it was just a matter of switching between the left button click event and the data and then binding it to the sliding date and I thought of writing it and I just clicked left button and I was done

changeleft:function() { const index = this.data.index - this.data.num; SetData ({agenda: this.data.result[index],// Pass the team name and team score to light: this.data.result[index].leftgrade > this.data.result[index].rightgrade ?'1' : '2'Index :index, current:index, showLeft:true// Change the icon to a lighter color})}Copy the code

Notice one detail, when there’s no more data left and right it’s going to change color and it’s going to be lighter and it’s not going to be able to click on it so we’re going to do an if and we’re going to see if the left and right are critical so the first and the last item in the array.

 turnleft: function (e) {
    const index = this.data.index -this.data.num;
      if (index <= -1) {
        return;
      } else if (index == 0) {
        this.changeleft();
      } else {
        this.changeleft();
        this.setData({
          showLeft: false,
          showRight: false,}}}),Copy the code

Here I show you the method on the left and the method on the right. So I started to write the slide part, which is a big loss of experience. When I think of sliding, I immediately think of the Scroll view and write a lot, but when I click on it, I’m stupid. This date is an instant change without sliding that effect ah, is this not good? So I used the scroll left to calculate the distance of each item and set the padding for a long time, which is a complete try, but still no sliding effect. (Spit out a mouthful of old blood)

Finally, SWIper was used to fix the effect

 swiperchange:function(e) { const current = e.detail.current; // Take the current swiper index const ind = this.data.index; // Index const dex = current-ind; // Check left and rightif(current-ind >0){this.setData({num:dex // slide how many items}) this.turnright() // left slide this.setData({num:1 // must return 1 because the click event changes the array item by 1 })}else if(current - ind <0){
      this.setData({
        num:-dex 
      })
     this.turnleft()
     this.setData({
       num:1
     })
    }
Copy the code

2. Return to the article page

back: function (e) {
    wx.switchTab({
      url: ".. /.. /pages/index/index"
    });
  }
Copy the code

3. Scroll view sliding problem

Many people may encounter problems such as swiper not being able to slide

  • Elements that need to slide in the Scroll view cannot float with a float.

  • Display :flex; display:flex; It has no effect;

  • Dislay :inline-block is used to slide elements in the scroll view; Horizontal arrangement of elements;

  • The big box that wraps the Scroll view has a clear width and style –> overflow:hidden; white-space:nowrap;

4. Pull-up loading and pull-down refreshing problems

  • Drop-down refresh requires json or app.json Settings on the current page"enablePullDownRefresh": true,
  • Wx.hideloading () must be added to the dropdown event otherwise the refresh dot will keep appearing
onPullDownRefresh() {
   // console.log('Pulled down');
   wx.showLoading({
     title: 'Death on fire',
   })
   wx.request({
     url: API_BASE,
     success: (res) => {
       this.setData({
         news: res.data.data.new,
         currentPage: 1,
         hide:false}) wx.hideLoading(); / /!!!!!! Wx.stoppulldownrefresh ()}})},Copy the code
  • For pull-up loading, either onPullDownRefresh(), which is the bottom of the page, or bindScRolltolower (), which is the bottom of the Scroll bar, can be used as appropriate.
 onReachBottom() {
   let{currentPage, totalPages} = this.data // deconstruct the currentPage and totalPages of es6 syntaxif (currentPage >= totalPages) {
     this.setData({
       hide:true,})return;
   }
   wx.showLoading({
     title: 'Death on fire', }) currentPage += 1; Wx. request({url: API_BASE, success: (res) => {const news = [// Put the requested data with the original data...this.data.news,// The spread operator is three points (...). It is like the reverse of the rest argument, turning an array into a comma-separated sequence of arguments. this.setData({ news, currentPage }) wx.hideLoading(); }})},Copy the code

5. Wx :if select render problem

In my projects there are a lot of styles or events that need to be added individually that can be rendered using WX :if in conjunction with blocks

<block wx:if="{{video.title == item.title}}">
                <view class="btn" style="display: none;"></view>
                <text class="content-title " style="white-space: normal; color: #42F32F;">{{item.title}}</text> 
            </block>
            <block wx:else>
                    <view class="btn" ></view>
                    <text class="content-title" style="white-space: normal;">{{item.title}}</text> 
                </block>
Copy the code

6. Navigator redirect problem

var that = this; var id = that.data.new.id; // Get the article idif (id === 'n8'Wx. showModal({title:'tip',
       content: 'There's no more to it.',
       showCancel: false,
       success: function (res) {
       } })
       return; Wx. request({url: API_BASE, success: (res) => {wx.request({url: API_BASE, success: (res) => {for (let i = 0; i < res.data.data.new.length; i++) {
         if(id === res.data.data.new[I].contentid) {// Check whether the corresponding data is received // console.log(id === res.data.data.new[I].contentid)"Found it."); This.setdata ({news: res.data.data.new[I + 1],// pass the requested data to the data}) var it = this; wx.navigateTo({ url:'news? id=' + this.data.news.contentId + '&title=' + this.data.news.title + '&from=' + this.data.news.from + '&image=' + this.data.news.image + '&content=' + this.data.news.content + ' '})}}}})},Copy the code

Write in the last

There are still many problems in writing projects, such as video black edge scroll view text wrapping and other problems, which can be solved by Baidu or checking official documents. As a beginner of small programs, MANY aspects were not well considered, such as request encapsulation, module componentization, and a lot of repetitive code was written. But this is not a matter, who does not crawl before running! To learn more, you can check out my project and welcome your valuable suggestions and opinions. The community is important to share, so don’t hide what’s good