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

实现效果如下:

图片.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;  
    }  

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

HTTP协议漫谈

简介 园子里已经有不少介绍HTTP的的好文章。对HTTP的一些细节介绍的比较好,所以本篇文章不会对HTTP的细节进行深究,而是从够高和更结构化的角度将H...

378130
来自专栏云计算教程系列

如何在Ubuntu 14.04上使用Pydio托管文件共享服务器

随着云的采用增加,越来越多的数据被远程存储。从音乐到图片再到个人文档,很多人都将文件上传到他们不管理的服务器上。如果您希望将文件保存在您控制的服务器上,则可以使...

45500
来自专栏张戈的专栏

硬盘故障时如何强制关机:Input/output error

如果硬盘可能会出现锁死或坏道的故障,会造成 SHELL 命令的失效,包括 reboot,powoff,,shutdown,用正常的命令是没法完成重启的。 执行这...

38740
来自专栏技术博客

JavaScript判断页面是否已经加载完毕

  在做针对CheckBox框点击事件的时候,发现点击以后有时候会报错,但是是生成的JavaScript的代码的内部错误,无法判断到底是什么地方有问题。就一直在...

11120
来自专栏网络

CobaltStrike团体服务器部署并后台运行

大家好,我是你们的老朋友Alex。Cobaltstrike的部署安装很简单,但是在实际使用中出现了问题。我把团队服务器放在ECS上,出现了两个问题:1.客户端无...

41660
来自专栏博客园迁移

jenkins自动部署应用到tomcat中,编译后shell脚本的简单示例

1.先配置好jenkins需要用到的其他外部组件  jdk,maven,git/svn

27530
来自专栏云计算教程系列

在CVM上搭建网页服务器(LNMP)

LNMP是一组可用于为动态网页和Web应用程序提供服务的软件。这是一个描述Linux操作系统的首字母缩略词,带有Nginx(发音为“ Engine-X”)Web...

68160
来自专栏张善友的专栏

Cross-Origin Resource Sharing协议介绍

传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求。浏览器是可以发起跨域请求的,比如你可以外链一个外域的...

23190
来自专栏SAP梦心的SAP分享

【域控管理】父域的搭建

从这篇博文开始,所有的域控系统都是在虚拟机中创建的。 在VM里安装Windows Server 2008 R2的方法就不多说了,无脑式安装,略过不提。 进到系统...

44680
来自专栏云知识学习

Windows Server 2008 R2修改远程桌面连接数

计算机---属性---远程设置---勾选"允许运行任意版本远程桌面的计算机连接(较不安全)"……

1.7K130

扫码关注云+社区

领取腾讯云代金券