@@ -12,7 +12,7 @@ | |||
"window":{ | |||
"backgroundTextStyle":"light", | |||
"navigationBarBackgroundColor": "#fff", | |||
"navigationBarTitleText": "Weixin", | |||
"navigationBarTitleText": "业务交流通", | |||
"navigationBarTextStyle":"black" | |||
}, | |||
"style": "v2", |
@@ -3,12 +3,51 @@ | |||
const app = getApp() | |||
Page({ | |||
data: { | |||
currentIndex: 0 | |||
}, | |||
onLoad() { | |||
}, | |||
data: { | |||
currentIndex: 0, | |||
inputValue: "", | |||
tabData: [ | |||
{ | |||
text: "全部", | |||
code: "all" | |||
}, | |||
{ | |||
text: "我关注的", | |||
code: "my1" | |||
}, | |||
{ | |||
text: "工商类", | |||
code: "my2" | |||
}, | |||
{ | |||
text: "财税类", | |||
code: "my3" | |||
}, | |||
{ | |||
text: "公司转让", | |||
code: "my4" | |||
}, | |||
], | |||
currentTab: "all" | |||
}, | |||
onLoad() { | |||
}, | |||
// 搜索框输入同步值 | |||
bindKeyInput: function (e) { | |||
this.setData({ | |||
inputValue: e.detail.value | |||
}) | |||
}, | |||
// 点击搜索 | |||
toSearch(e) { | |||
console.log(this.data.inputValue) | |||
}, | |||
// tab切换 | |||
tabChange(e){ | |||
let dataset = e.currentTarget.dataset; | |||
this.setData({ | |||
currentTab:dataset.code | |||
}) | |||
}, | |||
}) |
@@ -1,6 +1,18 @@ | |||
<!--index.wxml--> | |||
<view class="container"> | |||
康慧慧V9 | |||
<tabBar currentIndex="{{currentIndex}}"></tabBar> | |||
</view> | |||
<!-- index.wxml --> | |||
<view class="home-page"> | |||
<!-- 搜索块 --> | |||
<view class="search-view"> | |||
<view class="serach-input-view"> | |||
<input class="serach-input weui-input" bindinput="bindKeyInput" bindconfirm="toSearch" placeholder="请输入关键字搜索" confirm-type="search" /> | |||
</view> | |||
</view> | |||
<!-- tab块 --> | |||
<view class="tab-view"> | |||
<view wx:for="{{tabData}}" class="tab-li" wx:key="*this"> | |||
<text class="tab-span {{currentTab == item.code ? 'isActive' : ''}}" bindtap="tabChange" data-code="{{ item.code }}">{{item.text}}</text> | |||
</view> | |||
</view> | |||
<!-- 测试内容 --> | |||
<view>{{ currentTab }}</view> | |||
<tabBar currentIndex="{{currentIndex}}"></tabBar> | |||
</view> |
@@ -7,10 +7,49 @@ | |||
font-size: 26rpx; | |||
} | |||
/* 搜索块 */ | |||
.search-view { | |||
height: 230rpx; | |||
background: #32aecd; | |||
background: #edeff4; | |||
border-radius: 15rpx; | |||
box-sizing: border-box; | |||
padding:20rpx; | |||
margin-bottom: 30rpx; | |||
} | |||
.search-view .serach-input{ | |||
border: 1px solid #dcdfe6; | |||
background: #fff; | |||
box-sizing: border-box; | |||
padding-left: 40rpx; | |||
border-radius: 40rpx; | |||
height: 80rpx; | |||
} | |||
/* tab块 */ | |||
.tab-view { | |||
height: 60rpx; | |||
} | |||
.tab-view .tab-li{ | |||
float: left; | |||
box-sizing: border-box; | |||
height: 60rpx; | |||
line-height: 60rpx; | |||
padding-right: 15rpx; | |||
} | |||
.tab-view .tab-span{ | |||
display: inline-block; | |||
width: 100%; | |||
height: 100%; | |||
background: #fff; | |||
box-sizing: border-box; | |||
padding: 0 20rpx; | |||
border-radius: 10rpx; | |||
color: #6a6a6a; | |||
} | |||
.tab-view .tab-span.isActive{ | |||
color: #556fb5; | |||
border-radius: 10rpx 10rpx 0 0; | |||
border-bottom: 1px solid #57c1f0; | |||
} |