微信小程序 - 實現搜索界面(帶熱搜、搜索歷史和結果頁)

demo 地址: https://github.com/iotjin/Jh_weapp

效果圖：

wxml 代碼：

<van-search value="{{ inputValue }}" maxlength="15" placeholder="請輸入搜索關鍵詞" show-action bind:search="onSearch" bind:cancel="onCancel" bind:change="onChange" />

<view class='{{isShowResultView?"normalBgView-hidden":"normalBgView"}}'>
	<view class="hotSearchBgView">
		<view class="hotSearchTitleView">
			<view class="hotSearchTitle">熱門搜索</view>
			<van-icon name="delete" class="hotSearchCleanBtn" bindtap='CleanHotSearch' />
		</view>
		<view class="hotSearchTagBgView">
			<view class="hotSearchTag" wx:for="{{hotSearchArr}}" wx:key="index" bindtap='ClickHotSearchItem' data-text='{{item}}'>{{item}}</view>
		</view>
	</view>
	<view class="historyBgView">
		<view class="historyTitleView">
			<view class="historyTitle">搜索歷史</view>
			<van-icon name="delete" class="historyCleanBtn" bindtap='CleanHistory' />
		</view>
		<view class="historyTagBgView">
			<view class="historyTag" wx:for="{{searchHistoryArr}}" wx:key="index" bindtap='ClickHistoryItem' data-text='{{item}}'>
				<van-icon class="historyIconLeft" name="clock-o" color="#969696" size="20px" />
				<view class="historyText"> {{item}}</view>
				<van-icon class="historyIconRight" name="cross" color="#969696" size="20px" catchtap='CleanHistoryItem' data-text='{{item}}' />
			</view>
		</view>
	</view>
</view>

<view class='{{isShowResultView?"resultBgView":"resultBgView-hidden"}}'>
	<view class="resultCell" wx:for="{{searchResultArr}}" wx:key="index" bindtap='ClickResultItem' data-text='{{item}}'>
		<van-icon name="search" color="#969696" size="20px" />
		<view class="resultText"> {{searchResultArr[index]}}</view>
	</view>
</view>

wxss 代碼：

page {
  height: 100%;
  /* background-color: #F5F5F5; */
  background: white;
}

.normalBgView {
  background: white;
}

.normalBgView-hidden {
  display: none;
}

/* 熱搜 */
.hotSearchBgView {
  background: white;
  /* background: yellow; */
}

.hotSearchTitleView {
  height: 60rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hotSearchTitle {
  padding-left: 30rpx;
  font-size: 28rpx;
}

.hotSearchCleanBtn {
  padding-right: 30rpx;
}

.hotSearchTagBgView {
  padding: 10rpx;
  display: flex;
  flex-wrap: wrap;
}

.hotSearchTag {
  width: auto;
  height: 48rpx;
  line-height: 48rpx;
  background: rgba(246, 246, 246, 1);
  border-radius: 10rpx;
  padding: 5rpx 25rpx;
  font-weight: 300;
  font-size: 28rpx;
  color: #4A4A4A;
  margin: 10rpx;
  background: rgb(240, 240, 240);
  /* background: wheat; */
}

/* 搜索歷史 */
.historyBgView {
  background: white;
}

.historyTitleView {
  height: 60rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.historyTitle {
  padding-left: 30rpx;
  font-size: 28rpx;
}

.historyCleanBtn {
  padding-right: 30rpx;
}

.historyTag {
  padding-left: 30rpx;
  height: 100rpx;
  border-bottom: 1px solid rgb(230, 230, 230);
  display: flex;
  align-items: center;
}

.historyIconLeft {
  flex: 5;
}

.historyText {
  flex: 90;
  padding-left: 25rpx;
}

.historyIconRight {
  flex: 5;
  padding-right: 30rpx;
}

.resultBgView {
  background: white;
}

.resultBgView-hidden {
  display: none;
}

.resultCell {
  padding-left: 30rpx;
  height: 100rpx;
  border-bottom: 1px solid rgb(230, 230, 230);
  display: flex;
  align-items: center;
}

.resultText {
  padding-left: 30rpx;
}