【组件】微信小程序input搜索框的实现
开发小程序的过程,是一个学习知识,解决问题的过程,每当实现了一个需求,总会有很大的成就感,每天记录一个开发过程中的细节。
实现效果如下:
官方参考链接: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
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。
公众号回复“1”,拉你进程序员技术讨论群.
【组件】微信小程序input搜索框的实现的更多相关文章
- 微信小程序input组件抖动及textarea组件光标错位解决方案
问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...
- 微信小程序 input组件type属性3个值的作用
input组件是小程序的内容输入框组件,通常是这样来使用的: <input type="text" placeholder="输入点内容吧" /> ...
- 关于微信小程序 modal弹框组件的介绍
微信小程序 modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中 ...
- 微信小程序实现搜索关键词高亮
目录 1,前言 2,思路 3,代码逻辑 1,前言 项目中碰到一个需求,搜索数据并且关键词要高亮显示,接到需求,马上开干.先上效果图.源码已经做成了小程序代码片段,放入了GitHub了,文章底部有源码链 ...
- 微信小程序下拉框
微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果 下面来看一下代码: 首先WXML <view class='select_box'> <vie ...
- 全栈项目|小书架|微信小程序-实现搜索功能
效果图 上图是小程序端实现的搜索功能效果图. 从图中可以看出点击首页搜索按钮即可进入搜索页面. 布局样式是:搜索框 + 热搜内容 + 搜索列表. 搜索框使用 lin-ui 中的 Searchbar组件 ...
- 微信小程序 input 的 type属性 text、number、idcard、digit 区别
微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...
- 微信小程序-修改单选框和复选框大小的方法
方法有两种: 一:采用css的zoom属性 zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状. 二:采用css3的transform:scale属性 zoom缩放会将元素保 ...
- 微信小程序 input使用letter-spacing失效问题
根据ui设计稿, 本来思路是一个input搞定,下面的线使用背景图 background:url('/images/line.png')no-repeat bottom center; 然后使用let ...
随机推荐
- DevExpress Report打印边距越界问题
DevExpress Report Print的时候,出现这样的问题:one or more margins are set outside the printable area of the pa ...
- Reuse Is About People and Education, Not Just Architecture
 Reuse Is About People and Education, Not Just Architecture Jeremy Meyer you MigHT AdopT THE AppRoA ...
- WebMethod Description
http://www.webxml.com.cn/WebServices/WeatherWebService.asmx https://www.cnblogs.com/wanganyi/p/72202 ...
- angular路由(自带路由篇)
一.angular路由是什么? 为了实现SPA多视图的切换的效果,其原理可简述为每个 URL 都有对应的视图和控制器.所以当我们给url后面拼上不同的参数就能通过路由实现不同视图的切换. 二.文件总览 ...
- IDLE的自动补全功能
IDLE的自动补全功能位于:Edit→Show Completions,但每次需要补全的时候都需要点击一次,虽然IDLE提供了一个快捷键(Ctrl + Space),但实测无效.具体操作如下图
- android 自己定义状态栏和导航栏分析与实现
效果 android 4.4之后,系统是支持自己定义状态栏和导航栏的.举个最典型的样例就是bilibiliclient了(iOS版本号和android版本号能用两套全然不一样符合各自系统的设计ui,良 ...
- Poj1734题解
题目大意 求一个无向图的最小环 题解 假设是有向图的话.仅仅须要令f[i][i]=+∞,再floyd就可以: 对无向图.应该在floyd算法循环至k的一開始进行例如以下操作: 枚举i和j,假设点i存在 ...
- VPS搭建与IPv6使用教程
VPS搭建与IPv6使用教程 SoftEther命令: yum -y install gcc zlib-devel openssl-devel readline-devel ncurses-devel ...
- linux host主机名配置
1.查看主机名 #hostname 2.查看ip #ifconfig 2.添加主机名配置 #vi /etc/hosts 新增一行 172.23.26.195 vhost145.idmp.safe
- android图片特效处理之光晕效果
这篇将讲到图片特效处理的图片光晕效果.跟前面一样是对像素点进行处理,本篇实现的思路可参见android图像处理系列之九--图片特效处理之二-模糊效果和android图像处理系列之十三--图片特效处理之 ...