巧妙运用iView Weapp------------小程序更得心应手 （tab nav）

最近几个月小生一直在学习vue.js，也分享了许多vue常用列子，每个列子都是小生自己在项目中积累下来的，经过测试无bug后修改成列子与走在前端路上的朋友一同进步。接下来小生将围绕小程序来写列子，谁叫2018年小程序火的如日中天呢。

demo地址：https://download.csdn.net/download/zxd1314520/10665012

这一篇将围绕小程序的条件渲染来写：

所谓条件渲染简而言之，就是当满足什么条件的事执行什么事件。我们在项目中常用到选项卡，根据选项来判断来触发事件；

下面我们细讲

在此之前 希望你是仔细阅读了小程序 api文档的

首先https://weapp.iviewui.com/docs/guide/start 

 

二、

1. 添加需要的组件。在页面的 json 中配置（路径根据自己项目位置配置）：

"usingComponents": {
    "i-button": "../../dist/button/index"
}

以下为我自己所需要的插件

切记一定要自定义组件为true,参考小程序 api  https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

{
  "component": true,
  "usingComponents": {
    "i-button": "../../dist/button/index",
    "i-avatar": "../../dist/avatar/index",
    "i-notice-bar": "../../dist/notice-bar/index",
    "i-toast": "../../dist/toast/index",
    "i-card": "../../dist/card/index",
    "i-spin": "../../dist/spin/index",
    "i-drawer": "../../dist/drawer/index",
    "i-icon": "../../dist/icon/index",
    "i-tabs": "../../dist/tabs/index",
    "i-tab": "../../dist/tab/index"
  }
}

三，在wxml中 一定要理解条件渲染的原理

<i-tabs current="{{ current }}" bindchange="handleChange">
  <i-tab key="1" title="选项1"></i-tab>
  <i-tab key="2" title="选项2"></i-tab>
</i-tabs>
<view wx:if="{{tab1}}" class='tab1'>
  我是选项一，我的目标是学精学细
</view>
<view wx:if="{{tab2}}" class='tab2'>
  我是选项二，我的目标是拥有自己的专业技巧
</view>

 四,在js中写事件和判断条件

Page({
  data: {
     current: '1',
      tab1: true
  
  },

handleChange({ detail}) {
   var index = detail.key
    console.log(index)
    this.setData({
      current: detail.key
    });
    if(index == 1){
      this.setData({
        tab1:true,
        tab2: false
      })
    }else if(index == 2){
      this.setData({
        tab1: false,
        tab2:true
      })
    }
    
  },
})

五、效果如下