`movies.wxml`
~~~html
....
<import src="movie-grid/movie-grid-template.wxml" />
<view class="search">
<icon type="search" class="search-img" size="13" color="#405f80"></icon>
<input type="text" placeholder="芳華、無問西東" placeholder-class="placeholder" bindfocus="onBindFocus" bindconfirm ="onConfirm"></input>
<image wx:if="{{searchPanelShow}}" src="/images/icon/xx.png" class="xx-img" bindtap="onCancelImgTap" ></image>
</view>
.....
<view class="search-panel" wx:if="{{searchPanelShow}}">
<template is="movieGridTemplate"/>
</view>
~~~
`movies.wxss`
~~~css
.search{
display: flex;
flex-direction: row;
background-color: #f2f2f2;
height: 80rpx;
width: 100%;
}
.search-img{
margin: auto 0 auto 20rpx;
}
.search input{
height: 100%;
width: 600rpx;
margin-left: 20px;
font-size: 28rpx;
}
.placeholder{
font-size: 14px;
color: #d1d1d1;
margin-left: 20rpx;
}
.search-panel{
position: absolute;
top: 80rpx;
}
.xx-img{
height: 30rpx;
width: 30rpx;
margin: auto 0 auto 10rpx;
}
~~~
`movies.js`
~~~javascript
data: {
containerShow:true,
searchPanelShow:false
},
onBindFocus:function(){
this.setData({
containerShow:false,
searchPanelShow:true
});
},
onCancelImgTap:function(){
this.setData({
containerShow: true,
searchPanelShow: false
});
},
~~~
### 完成搜索
~~~html
<input type="text" placeholder="芳華、無問西東" placeholder-class="placeholder" bindfocus="onBindFocus" bindconfirm ="onConfirm"></input>
~~~
`movies.js`
~~~javascript
onConfirm:function(event){
var text = event.detail.value;
var searchUrl = app.globalData.doubanBase + "/v2/movie/search?q="+text;
this.getMovieListData(searchUrl,"searchResult","");
},
~~~
~~~html
<view class="search-panel" wx:if="{{searchPanelShow}}">
<template is="movieGridTemplate" data="{{...searchResult}}"/>
</view>
~~~
`movies.wxss`
~~~css
.single-view-container{
float: left;
margin-bottom: 40rpx;
}
.grid-container{
height: 1300rpx;
margin: 40rpx 0 40rpx 6rpx;
}
~~~
