小程序通过切换分类显示模板里面的内容

我想做一个类似小红书的小程序，但是要如何通过切换分类显示模板里面的内容

1.比如我是通过小程序云开发，通过如下代码(app.json)控制菜单点击，显示对应的内容.

{
  "cloud": true, 
  "pages": [
    "pages/index/index",
    "pages/appoint/appoint",
    "pages/user/user",
    "pages/appointed/appointed"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "艺云美发",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "backgroundColor": "#F2F2F2",
    "color": "#6B6B6B",
    "selectedColor": "#FF0000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "主页",
        "iconPath": "/images/bx_accepted.png",
        "selectedIconPath": "/images/bx_finished.png"
      },
      {
        "pagePath": "pages/appoint/appoint",
        "text": "预约",
        "iconPath": "/images/bx_accepted.png",
        "selectedIconPath": "/images/bx_finished.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "/images/bubble-tail.png",
        "selectedIconPath": "/images/bubble-tail-blue.png"
      }
    ]

  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

2.如果是一个菜单中的分类改变内容改变，可以通过触发事件，修改变量，控制显示或者隐藏的样式。
.js文件

bindChange: function (e) {
  var val = e.detail.value;
  this.setData({
      mobile_con: val
  });
},

.wxml内容

<view class="{{mobile_con=='/images/xiangshang.png'?'show' : 'hide'}}">
</view>

类似选项卡？ 可以自己封装一个 。只不过是给不同的数据