uni-app 搜索栏

清疚 2021-11-16 06:58 273阅读 0赞

# uni-app 搜索栏 #

1 <template>
     2     <view>
     3         <view class="content1"></view>
     4         <view class="search-block">
     5             <view class="search-ico-wapper">
     6                 <image src="../../static/chongzhi_sousuo/chongzhi-icon-sousuo@3x.png" class="search-ico" mode=""></image>
     7             </view>
     8             <input type="text" value="" placeholder="点击输入搜索内容" class="search-text" maxlength="10" focus/>
     9             <view class="search-ico-wapper1">
    10                 <image src="../../static/chongzhi_sousuo/chongzhi-icon-sys@3x.png" class="search-ico-1" mode=""></image>
    11             </view>
    12         </view>
    13         <view class="shadow">
    14             
    15         </view>
    16     </view>
    17 </template>
    18 
    19 <script>
    20     export default {
    21         data() {
    22             return {
    23                 
    24             }
    25         },
    26         methods: {
    27             
    28         }
    29     }
    30 </script>
    31 
    32 <style>
    33 .content1{
         
    34     height: 150upx;
    35 }
    36 
    37 page{
         
    38     background-color: #FFFFFF;
    39 }
    40 /* 搜索框 */
    41 .search-ico, .search-ico-1{
         
    42     width: 40upx;
    43     height: 40upx;
    44 }
    45 .search-text{
         
    46     font-size: 14px;
    47     background-color: #FFFFFF;
    48     height: 60upx;
    49     width: 480upx;
    50 }
    51 .search-block{
         
    52     display: flex;
    53     flex-direction: row;
    54     padding-left: 60upx;
    55     position: relative;
    56     top: -32upx;
    57 }
    58 .search-ico-wapper{
         
    59     background-color: #FFFFFF;
    60     display: flex;
    61     flex-direction:column;
    62     justify-content: center;
    63     padding: 0upx 0upx 0upx 40upx;
    64     border-bottom-left-radius:18px;
    65     border-top-left-radius: 18px;
    66 }
    67 .search-ico-wapper1{
         
    68     background-color: #FFFFFF;
    69     display: flex;
    70     flex-direction:column;
    71     justify-content: center;
    72     padding: 0upx 40upx 0upx 0upx;
    73     border-bottom-right-radius:18px;
    74     border-top-right-radius: 18px;
    75 }
    76 .shadow{
         
    77     width: 638upx;
    78     height: 60upx;
    79     border-radius:18px;
    80     -moz-box-shadow:0 0 10px #e6e6e6;
    81     -webkit-box-shadow:0 0 10px #e6e6e6;
    82     box-shadow:0 0 10px #e6e6e6;
    83     position: relative;
    84     top: -90upx;
    85     left: 60upx;
    86 }
    87 </style>

调这个太费劲了，各种位置样式！！！！粘下来的话可以直接拿去用！！！下面上效果图！！！

# 效果图 #

![1709882-20190712111800385-479580671.png][]

转载于:https://www.cnblogs.com/wo1ow1ow1/p/11174998.html

[1709882-20190712111800385-479580671.png]: /images/20211116/a5132c400d4c4792a0536b368505c03d.png