《放大镜后移》改造组件-完整版
最后更新于
这有帮助吗？
最后更新于
这有帮助吗？
抖音：
B站：
大家好，我们来看一下
这个问题能不能帮他解决一下哈
他说用了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
这样写一下应该就可以了
好今天就到这里谢谢大家