微信小程序 ---制作一个类似头条的滑动tab导航栏

效果图：

使用页面wxml

<!-- 顶部滑动导航栏组件 -->
<slideNav navList="{
   { navList }}" fontSize="{
   { 28 }}" padding="{
   { 20 }}" bindtabFun="tabFun"></slideNav>

使用页面json

{
   
  "usingComponents": {
   
    "slideNav": "/component/slideNav/slideNav"
  }
}

使用页面js

// page/slideNav/slideNav.js
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    navList: ['关注', '推荐', '抗击肺炎', '广州', '热点', '影视', '视频', '军事', '在家上课', '动漫', '漫画', '娱乐', '国际', '科技', '正能量', '音乐', '图片', '科技', '财经', '健康', '手机', '搞笑', '法制', '职场', '情感','网球'],
  },

  tabFun(e) {
   
    console.log(e.detail);
  },
})

---

下面是组件部分

组件wxml

<scroll-