小程序实现搜索框功能
本文实例为大家分享了小程序实现搜索框功能的具体代码,供大家参考,具体内容如下
创新互联建站为客户提供专业的成都网站设计、做网站、程序、域名、空间一条龙服务,提供基于WEB的系统开发. 服务项目涵盖了网页设计、网站程序开发、WEB系统开发、微信二次开发、移动网站建设等网站方面业务。
实现效果图:
xxx.wxml
取消
xxx.wxss
.weui-search-bar { position: relative; padding: 8px 10px; display: -webkit-box; display: -webkit-flex; display: flex; box-sizing: border-box; background-color: #EFEFF4; border-top: 1rpx solid #D7D6DC; border-bottom: 1rpx solid #D7D6DC; } .weui-icon-search { margin-right: 8px; font-size: inherit; } .weui-icon-search_in-box { position: absolute; left: 10px; top: 7px; } .weui-search-bar__text { display: inline-block; font-size: 14px; vertical-align: middle; } .weui-search-bar__form { position: relative; -webkit-box-flex: 1; -webkit-flex: auto; flex: auto; border-radius: 5px; background: #FFFFFF; border: 1rpx solid #E6E6EA; } .weui-search-bar__box { position: relative; padding-left: 30px; padding-right: 30px; width: 100%; box-sizing: border-box; z-index: 1; } .weui-search-bar__input { height: 28px; line-height: 28px; font-size: 14px; } .weui-icon-clear { position: absolute; top: 0; right: 0; padding: 7px 8px; font-size: 0; } .weui-search-bar__label { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; border-radius: 3px; text-align: center; color: #9B9B9B; background: #FFFFFF; line-height: 28px; } .weui-search-bar__cancel-btn { margin-left: 10px; line-height: 28px; color: #09BB07; white-space: nowrap; font-size: 30rpx; }
xxx.js
showInput: function () { this.setData({ inputShowed: true }); }, hideInput: function () { this.setData({ inputVal: "", inputShowed: false }); // getList(this); }, clearInput: function () { this.setData({ inputVal: "" }); // getList(this); }, inputTyping: function (e) { //搜索数据 // getList(this, e.detail.value); this.setData({ inputVal: e.detail.value }); }
更多搜索功能实现的精彩文章,请点击专题:javascript搜索功能汇总 进行学习
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
标题名称:小程序实现搜索框功能
转载来于:http://scyanting.com/article/jeocce.html