1# 搜索框与文字轮播的巧用
2## 背景介绍
3一般情况下，许多应用的搜索框在无输入时的提示文本为“请输入文字”、“请输入”等等，现在为了进行引流以及流量推送，将热搜词条通过轮播的方式在“假搜索框”进行循环播放。本例即为大家这类场景的开发。
4
5## 效果呈现
6![](figures/Swiper-Search.gif)
7
8## 运行环境
9本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：
10- IDE: DevEco Studio 4.0 Release
11- SDK: Ohos_sdk_public 4.0.10.13 (API Version 10 Release)
12
13## 实现思路
14本例包含的关键操作及其实现方案：
15- 构建假搜索框与文字轮播列表：假搜索框是由一个搜索图标和文字列表轮播构成放置于Row组件中。
16- 点击假搜索框进入真正的搜索框，并将当时点击时所显示的文字作为真正搜索框的提示文本进行搜索。
17
18## 开发步骤
191. 建立假的搜索框：通过搜索图标与纵向文字轮播组成。具体代码块如下：
20    ```ts
21    ...
22    Row(){
23      Image($r('app.media.ic_public_search_filled'))
24        .objectFit(ImageFit.Contain)
25        .width(20)
26        .aspectRatio(1)
27        .margin({left:15})
28      Swiper(){
29        ForEach(arr,(item:SearchTextModel)=>{
30          Column(){
31            Text(item.searchText)
32              .opacity(0.6)
33              .fontSize(14)
34              .fontColor(Color.Gray)
35          }.width('100%').alignItems(HorizontalAlign.Start)
36        },(item:SearchTextModel)=>item.id.toString())
37      }
38      ...
39      .loop(true).autoPlay(true).vertical(true).interval(3000).margin(12).indicator(false)
40    }.zIndex(2).width('100%').justifyContent(FlexAlign.Start).margin({left:12,right:12})
41      ...
42    ```
432. 点击假搜索框时所展示的文字传递到真正的搜索框并将其作为真正搜索框的提示文本：由于onChange()只有在轮播切换时才会触发回调并获取轮播文字，因此通过点击事件将获取文字传递进入真正的搜索框页面。具体代码块如下：
44    ```ts
45    .onChange((index:number)=>{
46      this.ind = arr[index].searchText
47      console.info('foo change'+JSON.stringify(this.ind))
48    })
49    ...
50    .onClick(()=>{
51      router.pushUrl({url:'pages/Next',params:{data:this.ind}})
52    })
53    ```
543. 进入到真正的搜索框界面：通过router.getParams()获取发起跳转的页面往当前页面传入的数据。具体代码块如下:
55    ```ts
56    aboutToAppear(){
57      let params:Params_Type = router.getParams() as Params_Type;
58      this.par=params.data
59      console.log('foo'+ JSON.stringify(router.getParams()));
60    }
61    ...
62    Search({placeholder:this.par ,controller:this.controller})
63      .searchButton("搜索")
64      .placeholderColor(this.color)
65      .width("85%")
66      .height(40)
67      .onSubmit((value:string)=>{
68        this.submitValue=value
69      })
70    ```
71
72## 完整代码
73完整示例代码如下：
74```ts
75// Content.ets
76export class SearchTextModel{
77  id:number
78  searchText:Resource
79
80  constructor(id:number,searchText:Resource) {
81    this.id = id
82    this.searchText =searchText
83  }
84}
85export class Topic_DATA{
86  id:number= 0
87  searchText:Resource|undefined =undefined
88}
89export const arr :Topic_DATA[]=[
90  {id:0,searchText:$r('app.string.topic1')},
91  {id:1,searchText:$r('app.string.topic2')},
92  {id:2,searchText:$r('app.string.topic3')}
93]
94export class Params_Type{
95  data:Resource|undefined =undefined
96}
97
98...
99
100// Index.ets
101import router from '@ohos.router';
102import {SearchTextModel,arr} from '../common/constants/Constants'
103
104@Entry
105@Component
106struct SearchComponent {
107  @State isStop:boolean =true
108  @State ind:Resource|undefined=undefined
109
110  build() {
111    Column() {
112      Row(){
113        Image($r('app.media.ic_public_search_filled'))
114          .objectFit(ImageFit.Contain)
115          .width(20)
116          .aspectRatio(1)
117          .margin({left:15})
118        Swiper(){
119          ForEach(arr,(item:SearchTextModel)=>{
120            Column(){
121              Text(item.searchText)
122                .opacity(0.6)
123                .fontSize(14)
124                .fontColor(Color.Gray)
125            }.width('100%').alignItems(HorizontalAlign.Start)
126          },(item:SearchTextModel)=>item.id.toString())
127        }
128        .onChange((index:number)=>{
129          this.ind = arr[index].searchText
130          console.info('foo change'+JSON.stringify(this.ind))
131        })
132        .loop(true).autoPlay(true).vertical(true).interval(3000).margin(12).indicator(false)
133
134      }.zIndex(2).width('100%').justifyContent(FlexAlign.Start).margin({left:12,right:12})
135      .onClick(()=>{
136        router.pushUrl({url:'pages/Next',params:{data:this.ind}})
137      })
138    }.backgroundColor(Color.White).border({width:2,color:Color.Black,radius:40}).margin({top:15})
139  }
140}
141
142...
143
144// Next.ets
145import router from '@ohos.router';
146import {Params_Type} from '../common/constants/Constants';
147
148@Entry
149@Component
150struct SearchExample {
151  controller:SearchController = new SearchController()
152  @State submitValue:string="";
153  @State par :Resource|undefined = undefined
154  private color = Color.Gray
155
156  aboutToAppear(){
157    let params:Params_Type = router.getParams() as Params_Type;
158    this.par=params.data
159    console.log('foo'+ JSON.stringify(router.getParams()));
160  }
161  build() {
162    Column(){
163      Row(){
164        Image($r('app.media.ic_public_back'))
165          .width('10%')
166          .height(35).margin({left:10})
167          .onClick(()=>{
168            router.back()
169          })
170
171        Search({placeholder:this.par ,controller:this.controller})
172          .searchButton("搜索")
173          .placeholderColor(this.color)
174          .width("85%")
175          .height(40)
176          .onSubmit((value:string)=>{
177            this.submitValue=value
178          })
179      }
180    }.margin({top:15})
181  }
182}
183```
184
185
186## 参考
187[Search](../application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-search.md)
188
189[Swiper](../application-dev/reference/apis-arkui/arkui-ts/ts-container-swiper.md)
190