微信小程序顶部搜索框 (带源码 建议收藏)
这是一个最简单的顶部搜索框 代码如下
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 () {}
})
那么最简单的学会了 进阶版的呢?
这是一个复杂点的搜索框样式:初始搜索框无法编辑和输入,点击搜索框使搜索框进入可编辑状态(在同一个页面完成),在搜索框内填入要搜索的内容
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});}
});
进阶版的也完成了 最后 我想到了 京东的点击搜索跳转一个页面 然后才可以编辑
主页代码如下
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' })}
});
微信小程序顶部搜索框 (带源码 建议收藏)相关推荐
- 微信小程序 顶部搜索框滑动伸缩效果的实现
项目场景:微信小程序顶部搜索框随页面滑动伸缩效果 提示:实现搜索框跟随用户滑动页面,实现伸缩效果 微信小程序 顶部搜索框滑动伸缩动画的实现 实现效果: 滑动前 滑动后 实现原理 提示:主要用到了微信小 ...
- 微信小程序——顶部搜索框
一点小小的声明:学习笔记,若有不妥之处还望指正,Thanks♪(・ω・)ノ 参考视频微信小程序实例--从入门到精通 效果展示: 步骤: 首先需要建立一个存放图片的文件夹images,该文件夹放置在最外 ...
- 微信小程序实战项目《带源码》——仿计算器
<微信小程序> 实验四报告 1. 实验名称: 仿计算器 2. 实验目的: 熟悉使用微信小程序开发工具,开发微信小程序项目.仿计算器,完成加减乘除求余四则运算. 3. 实验要求: 手工编写的 ...
- 微信小程序页面搜索框查询(无后台接口情况下)
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
- 微信小程序自定义搜索框(searchbar)
微信小程序自定义搜索框(searchbar) 样式截图展示: 功能描述:微信小程序页面需要加入搜索框时,可以直接引用到页面中使用,当用户未输入任何关键字时如第一张图所示,当用户输入要搜索的关键字时如第 ...
- 原生微信小程序,搜索框(search)组件
原生微信小程序,搜索框(search)组件 首先创建组件及两个跳转页面,第一个是搜索框所在的页面(首页),第二个是搜索详细页 搜索框的本质是:搜索框不是input,而是navigate,跳转到专门的搜 ...
- 开源微信小程序自助建站系统源码 含精美的多行业模板和搭建教程
分享一个微信小程序自助建站系统源码,含各行各业的小程序模板和搭建教程,可一键切换模板,自由DIY,搭建属于你自己的小程序. 特色功能一览: 11.支持创建多个小程序!(没有数量限制,后续免费升级) ...
- 微信小程序:强大工具箱组合源码
这是一个比较强大的一款工具箱 内有去水印功能(支持几十家平台去水印) 朋友圈功能|(发圈套图等) 头像,朋友圈封面,壁纸等 另外还有快递查询,手持弹幕等 另外还有一个强大的去水印历史记录 历史记录可以 ...
- 到家服务公司php源码,微信小程序-仿五洲到家商城源码
微信小程序-仿五洲到家商城源码 微信小程序仿五洲到家商城源码是一款精仿五洲到家app界面的小程序源码,适用于各类小程序商城系统,功能及模块均值得借鉴! 对应功能模块 > * 首页(定位成功情况且 ...
最新文章
- Spring Bean四种注入方式(Springboot环境)
- CreateThread创建线程函数详细讲解
- 安装ORACLE RAC时,用到的一些小命令1.弹出CD,2:配置时间同步,3.查看磁盘信息UUID
- 深入浅出 Spring
- Apache Cordova介绍
- 不知道怎么用GitHub怎么当程序员?拿出十分钟,包你会
- python编程入门教学-史上最全Python编程基础入门教程
- 自定义UINavigationController push和pop动画
- php游戏充值平台源码,PHP平台源码下载-PHP第四方支付平台源码pc端下载
- Hexo博客向百度提交链接
- 常见的Ajax写法汇总
- 嗖嗖移动大厅之使用场景类
- 华为对刷量、刷评论的惩罚是什么?有什么解决办法吗?
- Chromium浏览器扩展JS对象方法
- if (Build.VERSION.SDK_INT = Build.VERSION_CODES.KITKAT)设置后的效果
- 如何阅读论文?读论文的三个层次
- 4gl 的内建函数和操作符简介
- JUDE-UML工具软件介绍
- win8 如何摄像头测试软件,高手解说win8系统摄像头检测不到的设置教程
- CentOS安装QEMU(试验成功且简单的方法)