巧妙运用iView-Weapp-小程序更得心应手-tab-nav
目录
巧妙运用iView Weapp————小程序更得心应手 （tab nav）
最近几个月小生一直在学习vue.js，也分享了许多vue常用列子，每个列子都是小生自己在项目中积累下来的，经过测试无bug后修改成列子与走在前端路上的朋友一同进步。接下来小生将围绕小程序来写列子，谁叫2018年小程序火的如日中天呢。
demo地址：
这一篇将围绕小程序的条件渲染来写：
所谓条件渲染简而言之，就是当满足什么条件的事执行什么事件。我们在项目中常用到选项卡，根据选项来判断来触发事件；
下面我们细讲
在此之前 希望你是仔细阅读了小程序 api文档的
首先
二、
- 添加需要的组件。在页面的 json 中配置（路径根据自己项目位置配置）：
"usingComponents": {
"i-button": "../../dist/button/index"
}以下为我自己所需要的插件
切记一定要自定义组件为true,参考小程序 api
{
"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
})
}
},
})五、效果如下
