微信小程序--搜索框样式总结
首先配置app.json文件
配置相应路径：编译后生成相应文件夹、及文件夹内的4个文件，一个文件夹即一个页面。；
所有的js方法都是用bindtap（点击事件）调用的。例：搜索（点击搜索调用a方法）
Input文本框的属性：hidden="{{对应js里data中的内容}}。例：hidden="{{!inputShowed}}（ input中的内容不显示） hidden="{{inputShowed}}（显示input中的内容）
示例1：
先做一个最简单的文本框：在搜索框内输入想要搜索的内容，点击搜索就可以直接获取你想要的内容。
这是一个最简单的搜索框，点击搜索按钮调用接口完成搜索。基础代码如下：
wxml
<view><view><view class="weui-search-bar"><view class="weui-search-bar__form"><!-- 搜索框 --><view class="weui-search-bar__box"><icon class="weui-icon-search_in-box" type="search" size="14"></icon><input type="text" class="weui-search-bar__input" placeholder="请输入搜索内容"/></view></view><!-- 搜索按钮,调用搜索查询方法 --><view class="weui-search-bar__cancel-btn" bindtap='方法名a'>搜索</view></view></view>
</view>
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_in-box {position: absolute;left: 10px;top: 7px;
}
.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-search-bar__cancel-btn {margin-left: 10px;line-height: 28px;color: #09BB07;white-space: nowrap;
}
js
Page({/*** 页面的初始数据,可以为空*/data: {},// 查询搜索的接口方法a: function () {}
})
示例2:
这是一个复杂点的搜索框样式：初始搜索框无法编辑和输入，点击搜索框使搜索框进入可编辑状态（在同一个页面完成），在搜索框内填入要搜索的内容
点击第一幅图中的搜索框，搜索框样式变成第二幅图中的样式，点击取消后变回第一幅图中的样式。基础代码如下：
wxml
<view><view><view class="weui-search-bar"><view class="weui-search-bar__form"><!-- 最初始时的搜索框 --><view class="weui-search-bar__box"><icon class="weui-icon-search_in-box" type="search" size="14"></icon><input type="text" class="weui-search-bar__input" placeholder="搜索"/></view><!-- 可编辑时的搜索框 --><label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput"><icon class="weui-icon-search" type="search" size="14"></icon><view class="weui-search-bar__text">搜索</view></label></view><!-- 取消搜索 --><view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view></view></view>
</view>
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: 4px;font-size: inherit;
}
.weui-icon-search_in-box {position: absolute;left: 10px;top: 7px;
}
.weui-search-bar__text {display: inline-block;font-size: 16px;
}
.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-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;
}
js
Page({// 页面的初始数据data: {inputShowed: false, //初始文本框不显示内容},// 使文本框进入可编辑状态showInput: function () {this.setData({inputShowed: true //设置文本框可以输入内容});},// 取消搜索hideInput: function () {this.setData({inputShowed: false});}
});
示例3:
这是一个复杂的搜索框：初始搜索框无法编辑和输入（功能相当于按钮），点击搜索会跳转到一个新页面，在新页面完成搜索操作。
图一为主页面，图二为搜索页面（此页面只是为了完成搜索操作），点击主页面的搜索框进入搜索页面（搜索页面可以显示热门搜索和历史记录）。
主页面的基础代码如下：
wxml
<view class='page_row' bindtap="suo"><view class="search"><view class="df search_arr"><icon class="searchcion" size='16' type='search'></icon><input class="sousuo" disabled placeholder="搜索" bindtap='search'/></view></view></view>
wxss
.search{width: 98%;
}
.search_arr {border: 1px solid #d0d0d0;border-radius: 10rpx;margin-left: 20rpx;
}
.search_arr input{margin-left: 60rpx;height: 60rpx;border-radius: 5px;
}
.sousuo {padding-left: 38%;width: 15%;line-height: 150%;text-align: center;
}
.page_row{display: flex;flex-direction: row
}
.searchcion {margin: 10rpx 10rpx 10rpx 10rpx;position: absolute;margin-left:38%;z-index: 2;width: 15px;height: 15px;text-align: center;}
js
Page({/*** 页面的初始数据*/data: {},// 跳转到搜索页面search: function () {wx.navigateTo({url: '../search/search'})}
})
搜索页面基础代码如下：
wxml
<view><view><view class="weui-search-bar"><view class="weui-search-bar__form"><!-- 搜索框 --><view class="weui-search-bar__box"><icon class="weui-icon-search_in-box" type="search" size="14"></icon><input type="text" class="weui-search-bar__input" placeholder="请输入搜索内容"/></view></view><!-- 取消搜索 --><view class="weui-search-bar__cancel-btn" bindtap='hideInput'>取消</view></view></view>
</view>
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_in-box {position: absolute;left: 10px;top: 7px;
}
.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-search-bar__cancel-btn {margin-left: 10px;line-height: 28px;color: #09BB07;white-space: nowrap;
}
js
Page({/*** 页面的初始数据*/data: {},// 取消搜索,返回主页面hideInput: function () {
wx.navigateTo({
//跳转，返回主页面路径url: '../log1/log1' })}
});
微信小程序--搜索框样式总结相关推荐
- html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
- 微信小程序--搜索框样式 及form提交实现
搜索框样式 及form提交实现 第一种风格 .js bt_search(e){console.log('搜索',e)}, .wxml <form bindsubmit="bt_sear ...
- 微信小程序搜索框样式
效果如下: 代码: .wxml <view class="weui-search-bar"><view class="weui-search-bar__ ...
- 微信小程序————搜索框获取本地缓存搜索记录
微信小程序获取本地缓存的搜索记录 html <!--index.wxml--> //这里是搜索框 <view class="box_search">< ...
- 微信小程序搜索框 回车搜索事件
这里写的是在微信小程序里的搜索框,按软键盘回车键触发搜索事件. 首先前台代码,这是整个搜索框代码 <view class="weui-search-bar"><v ...
- 微信小程序搜索框实现模糊查询
目录 前言 一.概述 二.步骤 三.效果展示 总结 前言 主要实现功能,无美化,如需请自设 一.概述 开发工具:微信开发者工具 通过对微信原生组件input绑定事件实现对已获取的列表元素模糊查询的操作 ...
- 微信小程序搜索框自动补全功能
▶动态效果图◀ ▶效果涉及到的input属性◀ focus Boolean false 获取焦点 bindinput EventHandle ...
- 微信小程序搜索框加跳转
样式如下图 一般情况下 获得焦点时(出现可供搜索列表和取消键) 搜索关键字时(关键字在列表中) 搜索关键字时(关键字不在列表中) html <!-- 搜索框 --><!-- 一般情况 ...
- 微信小程序搜索框组件之SearchBar
index.wxml <!-- 组件模板 --> <view class="wrapper"><slot></slot><vi ...
最新文章
- 俄研发新无线传电系统 隔20cm保持80%传输效率
- ML之回归预测：利用13种机器学习算法对Boston(波士顿房价)数据集【13+1,506】进行回归预测(房价预测)+预测新数据得分
- python常用库 自动化办公类 —— PyPDF2（处理pdf文件）
- 浅谈python异步IO,同步IO,线程与进程~
- DRF (Django REST framework) 框架介绍(3)
- （十三）react hooks
- FP Tree算法原理总结（转）
- JDK 12的Files.mismatch方法
- c语言 字符串 url,如何对URL字符串进行百分号编码
- @Test 运行 Method xxx should be void、Method xxx should have no parameters
- 对外经贸大学计算机应用基础,对外经贸大学计算机应用基础试题.doc
- 调用系统相册，相机功能，遇到闪退的情况
- Oracle GoldenGate 12c中的协同交付（Coordinated Delivery）
- 信息服务器恢复需要多少时间,云服务器灾难恢复的4个计划
- [RHEL5企业级Linux服务攻略]--第5季 Sendmail服务全攻略之高级配置
- MVC3中输出Html标签的方法
- UJAM Virtual Guitarist SILK for mac(尼龙弦原声吉他)
- [codeup 1126]看电视
- python网络图可视化_蜘蛛网图实现Python可视化的方法
- 【Linux安全审计机制模块总体描述】