在商店页面的顶部可以添加一个搜索栏 .. 这个组件我们直接用一下 Taro UI 里的 AtSearchBar .. 先把这个组件从 taro-ui 里拿出来 .. 导入 AtSearchBar .. 来自 taro-ui ..

然后在页面的视图里面，找个地方用一下这个搜索栏 .. 先给视图添加一个包装 .. 添加一个 View 组件 .. 包装一下这个 page-demo .. 然后在 page-demo 的上面 ..

添加一个 AtSearchBar .. 现在页面顶部显示的就是一个搜索栏 ..

这个搜索栏可以把它单独放在一个组件里面 .. 在 src 下面新建一个 components 目录，里面是自定义的一些组件 .. 添加一个 search-bar .. 新建一个 index.js 文件 ..

文件里面添加一个基本的 Taro 组件 .. 名字是 SearchBar ..

然后导入 taro-ui 里的 AtSearchBar . 组件的 render 方法里面，添加一个 AtSearchBar ..

回到 ShopIndex 这个页面 .. 在文件顶部 .. 导入自定义的搜索栏组件 .. 名字可以是 SearchBar .. 位置是上一级目录的上一级目录里的 components 下面的 search-bar ..

然后在页面的 render 方法里面，用一下自定义的 SearchBar 这个组件 .. 现在，这个商店页面上显示的搜索栏就是我们自定义的一个搜索栏 ..