> For the complete documentation index, see [llms.txt](https://sunzsh.gitbook.io/xiaoshan.bug/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sunzsh.gitbook.io/xiaoshan.bug/fang-da-jing-hou-yi-gai-zao-zu-jian-wan-zheng-ban.md).

# 《放大镜后移》改造组件-完整版

* 抖音：<https://v.douyin.com/rn1nbU9/>
* B站：<https://www.bilibili.com/video/BV1aZ4y197YG/>

大家好，我们来看一下

这个问题能不能帮他解决一下哈

他说用了uView的搜索组件

然后，这个放大镜想放到右边

但是，原生的组件 不支持这个配置

我们先来搜一下 uView

应该是这个

然后找个demo

那是组件

然后来找 search

这个

好！这是个demo

我往下找哈

看一下这些属性

好确实没有哈

这个

翻了一下这些属性都没有

那我们先来检查一下这个元素吧

看看能不能从 css 上找到切入点

这是 input

然后外边套了个form

我们把它大一点

这有一个

这有一个

\<uni-view ...>

展开

这是一个

flex 布局，a

这个好

他用了 flex 布局的话

就方便了大家看

第一个是放大镜

第二个是后边的框

我把它收起来就这两个元素

然后被一个

容器包裹着

然后这个容器还是 flex 布局的，大家看

那所以呢

我们试一下加一个

有个属性叫 flex-direction

等于 row-reverse

哎可以了

大家看

这就搞定了

所以我们可以写个样式

应该就

他这是u-content

但我们不能用 u-content

因为这content可能...

是一个比较公用的样式

我们往外找，u-search是应该可以

或者我们在代码里给它

重新设置一个样式

比如说叫

my-search

然后呢在这：.my\_search

找到里面的

u-content

那他这个也有样式穿透

所以我们直接：.u-content 就行

然后里边给他写上 flex-direction

等于： row-reverse

reverse

这样写一下应该就可以了

好今天就到这里谢谢大家