【组件】微信小程序input搜索框的实现

前端 同时被 2 个专栏收录
332 篇文章 6 订阅

开发小程序的过程,是一个学习知识,解决问题的过程,每当实现了一个需求,总会有很大的成就感,每天记录一个开发过程中的细节。
实现效果如下:

图片.png

官方参考链接:https://developers.weixin.qq.com/miniprogram/dev/component/input.html

wxml:


  <view class='page_row' bindtap="suo">  
      <view class="search">  
        <view class="df search_arr">  
          <icon class="searchcion" size='20' type='search'></icon>  
          <input class="" disabled placeholder="请输入关键字" value="{{searchValue}}"/>  
        </view>  
      </view>  
      <view class='sousuo'>搜索</view>  
    </view>  

wxss:


    .search{  
      width: 80%;  
    }  
    .search_arr {  
      border: 1px solid #d0d0d0;  
      border-radius: 10rpx;  
      margin-left: 20rpx;  
    }  
    .search_arr input{  
      margin-left: 60rpx;  
      height: 60rpx;  
      border-radius: 5px;  
    }  
    .bc_text {  
      line-height: 68rpx;  
      height: 68rpx;  
      margin-top: 34rpx;  
    }  
      
    .sousuo {  
      margin-left: 15rpx;  
      width: 15%;  
      line-height: 150%;  
      text-align: center;  
      border: 1px solid #d0d0d0;  
      border-radius: 10rpx;  
    }  
    .page_row{  
      display: flex;  
      flex-direction: row  
    }  
    .searchcion {  
      margin: 10rpx 10rpx 10rpx 10rpx;  
      position: absolute;  
      left:25rpx;  
      z-index: 2;  
      width: 20px;  
      height: 20px;  
      text-align: center;  
    }  

原文作者:祈澈姑娘
技术博客:https://www.jianshu.com/u/05f416aefbe1

  • 关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

 

  • 7
    点赞
  • 0
    评论
  • 14
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值