| "window":{ | "window":{ | ||||
| "backgroundTextStyle":"light", | "backgroundTextStyle":"light", | ||||
| "navigationBarBackgroundColor": "#fff", | "navigationBarBackgroundColor": "#fff", | ||||
| "navigationBarTitleText": "Weixin", | |||||
| "navigationBarTitleText": "业务交流通", | |||||
| "navigationBarTextStyle":"black" | "navigationBarTextStyle":"black" | ||||
| }, | }, | ||||
| "style": "v2", | "style": "v2", |
| const app = getApp() | const app = getApp() | ||||
| Page({ | 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 | |||||
| }) | |||||
| }, | |||||
| }) | }) |
| <!--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> |
| font-size: 26rpx; | font-size: 26rpx; | ||||
| } | } | ||||
| /* 搜索块 */ | |||||
| .search-view { | .search-view { | ||||
| height: 230rpx; | height: 230rpx; | ||||
| background: #32aecd; | |||||
| background: #edeff4; | |||||
| border-radius: 15rpx; | border-radius: 15rpx; | ||||
| box-sizing: border-box; | box-sizing: border-box; | ||||
| padding:20rpx; | 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; | |||||
| } | } |