如何实现标题栏中的搜索框？

wilde

上图是官网微店案例中“搜索”页面上方的搜索框。我看了配套的教材《 HTML5 App商业开发实战教程》中以及视频，没有对这部分的制作过程。虽然试着加上了一个input组件，但是太宽了，不能像例子那样左右都会缩进一些的，并且搜索框中的放大镜图标是如何加上去的呢？

liangyongfei

这个是要自己开发的！所以没案例！只能自己琢磨了！
也可以参考仿淘宝 ，仿途牛的实现！

wilde

liangyongfei 发表于 2017-10-31 18:15
这个是要自己开发的！所以没案例！只能自己琢磨了！
也可以参考仿淘宝 ，仿途牛的实现！ ...

可这个是教材中的例子，而教材中又没有给出是如何实现的，这样的话对初学者来说有点难度啊。

wilde

硬着头皮试了一下，实现了案例的效果，与大家分享一下。

1. 将titleBar中的三个title区块都删掉，添加一个row，row中删掉一列保留两列。
2. 左边的列中放一个按钮，样式透明背景、放大镜icon。调整所在列的尺寸为x-col-fixed；
3. 右边的列中放input组件，背景设为淡灰色。
4. 此时左侧为放大镜，右侧为input。我的做法是让放大镜所在列的margin: -30px，这样可以让列向右移动。但是HTML的规则是后面的div元素会“盖过”前面的元素，即放大镜跑到了input的下面。
5. 将放大镜所在列的定位设置为position:absolute，这样可以让放大镜所在列出现在input所在列的上面；
6. 对input设置属性padding-left:30px，从而可以让文字在放大镜后输入而不被其遮盖。

liangyongfei

wilde 发表于 2017-10-31 21:06
硬着头皮试了一下，实现了案例的效果，与大家分享一下。

1. 将titleBar中的三个title区块都删掉，添加一个 ...

主要是，如果案例都提供给大家了！学生们就不愿意自己思考了！直接拷贝是很方便，但是不能起到练习的效果！