小程序实现搜索界面 小程序实现推荐搜索列表效果

本文实例为大家分享了小程序实现搜索界面的具体代码,供大家参考,具体内容如下

效果图:

实现代码:

<view class="page">
 <view class="page__bd">
 <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="搜索" maxlength='10' value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
   <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
   <icon type="clear" size="14"></icon>
   </view>
  </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 class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}">
  <!-- 搜索列表 -->
  <view class="weui-cell__bd" wx:for="{{list}}" wx:key="key">
  <!-- 列表名称 -->
  <view class='list_name' data-index='{{index}}' data-name='{{item.name}}' bindtap='btn_name'>
   <!-- 昵称 -->
   <label class='lab_name'>{{item.name}}</label>
  </view>
  </view>
 </view>

 </view>
</view>

js:

Page({
 data: {
 // 搜索框状态
 inputShowed: false,
 // 搜索框值
 inputVal: "",
 //搜索渲染推荐数据
 list:[
  {name:"帝霸"},
  { name: "遮天" },
  { name: "道界天下" },
  { name: "菜鸟" },
  { name: "先飞" }
 ]
 },
 // 显示搜索框
 showInput: function () {
 this.setData({
  inputShowed: true
 });
 },
 // 隐藏搜索框样式
 hideInput: function () {
 this.setData({
  inputVal: "",
  inputShowed: false
 });
 },
 // 清除搜索框值
 clearInput: function () {
 this.setData({
  inputVal: ""
 });
 },
 // 获取搜索框值
 inputTyping: function (e) {
 this.setData({
  inputVal: e.detail.value
 });
 console.log(this.data.inputVal);
 },
 // 获取选中推荐列表中的值
 btn_name:function(res){
 console.log(res.currentTarget.dataset.index, res.currentTarget.dataset.name);
 }
});

CSS:

.searchbar-result{
 margin-top: 0;
 font-size: 14px;
}

/* 搜索列表名称 */
.list_name{
 position: relative;
 width: 100%;
 height: 90rpx;
 line-height: 90rpx;
 border-bottom: 1rpx solid #ddd;
}
/* 列表名称 */
.lab_name{
 position: absolute;
 left: 30rpx;
}

记得最后在app.wxss中引入wehui.wxss

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序搜索功能(附:小程序前端+PHP后端)

    开发需求 微信小程序已经是非常火了,而且学习也比较容易,但是对于初学者来说还是一件比较伤脑筋的事,接下来给大家分享一下小程序搜索的思路. 流程 1.表单(输入框.提交按钮.提交的name值) 2.接收表单数据(js获取表单name=keyword的值) 3.通过wx.request向服务器后端发起请求查询数据库 4.返回JSON格式的数据给小程序,js解析渲染到小程序前端展示 界面 代码 index.wxml <!-- 标题 --> <view class="title&quo

  • 小程序获取当前位置加搜索附近热门小区及商区的方法

    本文详细的介绍了小程序获取当前位置加搜索附近热门小区及商区的方法,分享给大家 两种方法:一种是腾讯地图获取,另一种是百度地图获取 我用的是腾讯地图获取步骤如下 1.话不多说,直接上干货 实现上图效果,主要技术是获取微信小程序地理位置,得到经纬度,使用微信小程序JavaScript SDK逆地址解析和地点搜索实现 2.微信小程序JavaScript SDK 申请开发者密钥(key):https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.h

  • 微信小程序实现搜索历史功能

    结合了微信给的资料,马马虎虎摸索出了一些东西,下面说下一下微信小程里序搜索历史功能的实现,下图是实现效果. 首先,定义历史记录的显示风格和方式,在下用的是列表模式,没有使用什么比较酷炫的套路. <view wx:for="{{sercherStorage}}" wx:key="item.id"> <view class="liclass" style="color:#9E9E9E;border-bottom:0;fon

  • 微信小程序结合Storage实现搜索历史效果

    本文实例为大家分享了微信小程序实现搜索历史效果的具体代码,供大家参考,具体内容如下 实现目标 代码实现 集合wx.setStorageSync()和wx.getStorageSync()这两个同步函数来实现这个功能实际上非常简单. <!-- wxml --> <view class="search-box"> <view class='icon'> <image src='../../assets/search.png' mode='width

  • 微信小程序城市选择及搜索功能的方法

    实现搜索城市功能 参考 微信小程序 之『仿美团城市选择 城市切换』 https://github.com/cinoliu/-selectCity js文件 // pages/address/address.js var app = getApp() Page({ data: { searchLetter: [], showLetter: "", winHeight: 0, cityList: [], isShowLetter: false, scrollTop: 0,//置顶高度 sc

  • 微信小程序搜索组件wxSearch实例详解

    wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // wxml中引入模板 <import src="/wxSearch/wxSearch.wxml"/> <template is="wxSearch" data="{{wxSearchData}}"/> // wxss中引入 @i

  • 微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    就在昨天,微信宣布了微信小程序开发者工具新增"云开发"功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜素功能的效果图 1.首页分类功能的实现 boxtwo方法(.js文件) boxtwo: function (e) { var index = parseInt(e.currentTarget.dataset.index) this.setData({ HomeIndex: index }) }, 当在首页点击 分类导航时,会触发这个方法,并传回当前点击

  • 微信小程序实现搜索功能并跳转搜索结果页面

    本文实例为大家分享了微信小程序实现搜索功能,并跳转搜索结果页面,供大家参考,具体内容如下 搜索页面: search.wxml页面: <view class="form"> <input class="searchInput" value='{{keyWord}}' bindconfirm='goSearch' placeholder="请输入搜索关键字" type="text" /> </view

  • 小程序实现搜索界面 小程序实现推荐搜索列表效果

    本文实例为大家分享了小程序实现搜索界面的具体代码,供大家参考,具体内容如下 效果图: 实现代码: <view class="page"> <view class="page__bd"> <view class="weui-search-bar"> <view class="weui-search-bar__form"> <view class="weui-sear

  • Java实现简单日历小程序 Java图形界面小日历开发

    今天给大家介绍一下如何用Java swing开发一款简单的小日历,下面我们来看代码: 首先创建一个CalendarBean类,用于基本的日期计算: package other1; import java.util.Calendar; public class CalendarBean { String day[]; int year=2005,month=0; public void setYear(int year) { this.year=year; } public int getYear

  • 小程序点餐界面添加购物车左右摆动动画

    效果图 动画代码 这里 只提供图中购物车动画代码,不提供以上点餐界面(需要点餐界面 点击这里:Gitee仓库). 在触发代码中使用 this.cartWwing() 调用动画,不理解请访问教程. /** * 点击商品+号购物车摆动 * @return void */ cartWwing: function() { // 创建动画实例(animation) var animation = wx.createAnimation({ duration: 100,//动画持续时间 timingFunct

  • 微信小程序仿淘宝热搜词在搜索框中轮播功能

    摘要 逛淘宝的时候,发现淘宝搜索框中一直在垂直方向上轮播热搜提示词,觉得这是个不错的设计,除了能让空间更充分使用,也能让页面更有动感,最重要的是能够增加搜索框的使用频率.就在小程序中试着实现实现. 效果 体验 实现思路 思路比较简单,主要是两点, 1:input处于热搜提示词上层,用z-index实现 2:热搜词轮播用swiper实现,方向为vertical 3:在input聚焦时获取swiper当前值,设置为placeholder 4:将swiper隐藏 代码 已封装成组件 组件代码: wxs

  • 微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)

    上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 <view class='page_row' bindtap="suo"> <view class="search"> <view class="df search_arr"> <icon class="searchcion" size='20' type='search'></icon>

  • 微信小程序实现登录界面

    微信小程序的登录界面实现,供大家参考,具体内容如下 <view class="container"> <view class="wrapper"> <view class="left-top-sign">LOGIN</view> <view class="welcome"> 欢迎回来! </view> <view class="input-

  • 微信小程序实现登录界面示例

    本文实例为大家分享了微信小程序实现登录界面的具体代码,供大家参考,具体内容如下 注:这里使用的是原生微信小程序 使用wxss和wxml index.wxml文件中代码 <view class="v1">   <!-- v2父容器  子view使用绝对布局 -->   <view class="v2">     <view class="dltext">登录</view>       &l

  • 微信小程序去哪里找 小程序到底如何使用(附小程序名单)

    微信小程序要去哪里找?又该怎么用?秘密全在这里 微信小程序正式发布 看完你也会玩小程序!  2017年1月9日,是一个值得载入互联网史册的日子. 这一天,零点刚过,张小龙和他的团队,在夜色笼罩下,正式发布了微信小程序. 所以,从这一刻开始,只要有开发者登录小程序后台,并在「开发管理」页面点击了「发布」按钮,就会有一个小程序,降临到这个世界上. 而微信小程序,这个设定为「无处不在」的产品,切切实实地「在」你身边了,并即将给你的生活带来新的变化. 那么,小程序到底是什么?小程序的入口在哪里?小程序到

  • 微信小程序实现猜数字小游戏的实战过程

    目录 功能介绍 效果图  一.首页效果图(index03)的代码 二.开始游戏页面(index)代码 三.游戏规则页面(index01)代码 四.关于其他页面(index02)代码 总结 功能介绍 用户输入1-100之间的数字,根据结果提示用户猜的大小,如果用户猜对可以重新开始(还可以设置猜的次数) 效果图 点击开始游戏界面   游戏规则界面 关于其他界面  我的首页(效果图)使用的是index03 开始游戏使用的是index 游戏规则使用的是index01 关于其他使用的是index02 (创

  • 微信小程序使用uni-app开发小程序及部分功能实现详解

    目录 一.uni-app 1.简介 2.开发工具 3.新建 uni-app项目 4.把项目运行到微信开发者工具 二.实现tabBar效果 1.创建tabBar页面 2.配置tabBar 三.配置网络请求 1.依照官网提示安装.导入.使用 2.实战 四.uni-app 里面小程序分包 1.创建分包目录 2.在 pages.json 文件中配置 3.创建分包页面 五.公用方法封装 六.搜索功能 1.搜索组件 2.搜索建议实现 3.本地存储 4.过滤器 七.上拉加载.下拉刷新 1.上拉加载 2.下拉刷

随机推荐