微信小程序开发-如何使用iView Weapp生成Tabs 标签页

iView Weapp是一套高质量的微信小程序 UI 组件库。通过组件库，我们可以快速地生成一些UI效果。

首先，需要到 GitHub（地址见文末） 下载 iView Weapp 的代码，将 dist 目录拷贝到自己的项目中。

在对应页面的.json文件中添加需要的组件：

 "usingComponents": {
    "i-tabs": "../../../components/dist/tabs/index",
    "i-tab": "../../../components/dist/tab/index"
  }

 在.wxml文件中使用组件：

<i-tabs current="{{ current }}" bindchange="handleChange">
    <i-tab key="tab1" title="选项1"></i-tab>
    <i-tab key="tab2" title="选项2"></i-tab>
    <i-tab key="tab3" title="选项3"></i-tab>
</i-tabs>

此时，页面会自动根据配置的标签生成tab。

通过绑定的bindchange方法可以实现切换tab的效果：

handleChange: function(options) {
    this.setData({
        current: options.detail.key
    })
}

整个过程还是非常流畅的，比自己重新写一组tab要简单得多。并且，组件也提供了接口可以帮助自定义组件样式，这些可以参阅官方文档。

参考文档：

iView Weapp：https://weapp.iviewui.com/

iView Weapp Github地址：https://github.com/TalkingData/iview-weapp