How to build navigator of video website in Wechat mini program

Here are some bilibili interface:

首页导航：http://mock-api.com/mnEe4VnJ.mock/navList
轮播图：http://mock-api.com/mnEe4VnJ.mock/swiperList
视频列表：http://mock-api.com/mnEe4VnJ.mock/videoList
视频详情：http://mock-api.com/mnEe4VnJ.mock/videoDetail
推荐视频：http://mock-api.com/mnEe4VnJ.mock/otherList
评论列表：http://mock-api.com/mnEe4VnJ.mock/commentList

We can use postman to test the first one (navList):

And good job this interface works.

Then we should use code in index.js:

  data: {
    // 首页导航数据
    navList:[]
  },

If the url we use is not allowed, we need to check this from setting in order to let Wechat mini program accepts outside url:

To get the a scroll navigator bar, add code: