weapp/game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

将搜索条独立成组件

Browse Source
This commit is contained in:
zhl 2019-04-18 17:17:11 +08:00
parent a4c20f32eb
commit 2b96d3df24
4 changed files with 80 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
project.config.json
View File

@ -1,7 +1,7 @@
{
"description": "A WePY project",
"setting": {
"urlCheck": true,
"urlCheck": false,
"es6": false,
"postcss": false,
"minified": false,

55
src/components/z-search-bar.wpy Normal file
View File

@ -0,0 +1,55 @@
<!--顶部搜索条-->
<style lang="less">
@import "../style/search.less";
</style>
<template>
<view class="z-search-bar">
<view class="z-search-bar__form">
<view class="z-search-bar__box" hidden="{{!inputShowed}}">
<icon class="z-icon-search_in-box" type="search" size="14"></icon>
<input type="text" class="z-search-bar__input" confirm-type="search" placeholder="" @input="inputChange" value="{{inputVal}}" focus="{{inputShowed}}" @confirm="endInput" />
<view class="z-icon-clear" @tap="clearInput">
<icon type="clear" size="14"></icon>
</view>
</view>
<view class="z-search-bar__box" hidden="{{inputShowed}}">
<label class="z-search-bar__label" @tap="showInput">
<icon class="z-icon-search" type="search" size="14"></icon>
<view class="z-search-bar__text">输入游戏名</view>
</label>
</view>
</view>
<view class="z-search-bar__cancel-btn" hidden="{{!inputShowed}}" @tap="hideInput">取消</view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class zSearchBar extends wepy.component {
props = {
}
data = {
inputShowed: false,
inputVal: '',
}
methods = {
showInput () {
this.inputShowed = true;
},
hideInput () {
this.inputVal = '';
this.inputShowed = false;
},
inputChange(e) {
this.inputVal = e.detail.value;
},
clearInput () {
this.inputVal = '';
},
endInput (e) {
this.inputVal = e.detail.value;
this.$emit('endInput', this.inputVal);
},
}
}
</script>

40
src/pages/search.wpy
View File

@ -1,6 +1,6 @@
<style lang="less">
@import "../style/index.wxss";
@import "../style/search.less";
.container {
background-color:#FFFFFF;
}
@ -14,24 +14,7 @@
<template>
<view class="container">
<view class="top-action-bar">
<view class="weui-search-bar">
<view class="weui-search-bar__form">
<view class="weui-search-bar__box" hidden="{{!inputShowed}}">
<icon class="weui-icon-search_in-box" type="search" size="14"></icon>
<input type="text" class="weui-search-bar__input" confirm-type="search" placeholder="" value="{{inputVal}}" focus="{{inputShowed}}" bindconfirm="endInput" />
<view class="weui-icon-clear" hidden="{{inputVal.length === 0}}" bindtap="clearInput">
<icon type="clear" size="14"></icon>
</view>
</view>
<view class="weui-search-bar__box" hidden="{{inputShowed}}">
<label class="weui-search-bar__label" bindtap="showInput">
<icon class="weui-icon-search" type="search" size="14"></icon>
<view class="weui-search-bar__text">输入游戏名</view>
</label>
</view>
</view>
<view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
</view>
<zSearchBar @endInput.user="endInput" ></zSearchBar>
<view class="filter-bar">
<view class="search-btn">
<picker @change="categoryChange" value="{{category}}" range="{{categoryArr}}">
@ -76,6 +59,7 @@
import gridCell from '../components/grid-cell';
import recentGame from '../components/recent-game';
import zanLoadmore from '../components/zan-loadmore';
import zSearchBar from '../components/z-search-bar';
import global from '../common/global';
import jcEvent from '../common/jc-event';
@ -91,7 +75,8 @@
recordCell: recordCell,
gridCell: gridCell,
recentGame: recentGame,
zanLoadmore: zanLoadmore
zanLoadmore: zanLoadmore,
zSearchBar: zSearchBar
};
data = {
@ -101,7 +86,6 @@
loading: false,
noData: true,
noMore: false,
inputShowed: false,
inputVal: '',
language: '所有语言',
type: 0,
@ -114,18 +98,8 @@
};
methods = {
showInput () {
this.inputShowed = true;
},
hideInput () {
this.inputVal = '';
this.inputShowed = false;
},
clearInput () {
this.inputVal = '';
},
endInput (e) {
this.inputVal = e.detail.value;
endInput (val) {
this.inputVal = val;
this.initPageParam();
this.getRecords();
},

35
src/style/search.less
View File

@ -1,4 +1,4 @@
@weuiSearchBarHeight: 28px;
@zSearchBarHeight: 28px;
.top-action-bar {
display: flex;
flex-direction: column;
@ -14,7 +14,7 @@
padding: 10rpx;
}
.weui-search-bar {
.z-search-bar {
position: relative;
padding: 8px 10px;
display: flex;
@ -23,49 +23,48 @@
border-top: 1rpx solid #D7D6DC;
border-bottom: 1rpx solid #D7D6DC;
}
.weui-icon-search {
.z-icon-search {
margin-right: 8px;
font-size:inherit;
}
.weui-icon-search_in-box {
.z-icon-search_in-box {
position: absolute;
left: 10px;
top: 7px;
}
.weui-search-bar__text{
.z-search-bar__text{
display: inline-block;
font-size: 14px;
vertical-align: middle;
}
.weui-search-bar__form {
.z-search-bar__form {
position: relative;
flex: auto;
border-radius: 5px;
background: #FFFFFF;
border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {
.z-search-bar__box {
position: relative;
padding-left: 30px;
padding-right: 30px;
width: 100%;
box-sizing: border-box;
z-index: 1;
height: @weuiSearchBarHeight;
height: @zSearchBarHeight;
}
.weui-search-bar__input {
height: @weuiSearchBarHeight;
line-height: @weuiSearchBarHeight;
.z-search-bar__input {
height: @zSearchBarHeight;
line-height: @zSearchBarHeight;
font-size: 14px;
}
.weui-icon-clear {
.z-icon-clear {
position: absolute;
top: 0;
right: 0;
padding: 7px 8px;
font-size: 0;
padding: 0 8px;
}
.weui-search-bar__label {
.z-search-bar__label {
position: absolute;
top: 0;
right: 0;
@ -76,12 +75,12 @@
text-align: center;
color: #9B9B9B;
background: #FFFFFF;
line-height: @weuiSearchBarHeight;
line-height: @zSearchBarHeight;
height: 28px;
}
.weui-search-bar__cancel-btn {
.z-search-bar__cancel-btn {
margin-left: 10px;
line-height: @weuiSearchBarHeight;
line-height: @zSearchBarHeight;
color: #09BB07;
white-space: nowrap;
}