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

 更新时间:2019年05月18日 17:03:01   作者:菜鸟老五  
这篇文章主要为大家详细介绍了小程序实现搜索界面,小程序实现推荐搜索列表效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

效果图:

实现代码:

<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

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

相关文章

  • JS实现“隐藏与显示”功能(多种方法)

    JS实现“隐藏与显示”功能(多种方法)

    这篇文章主要介绍了JS实现“隐藏与显示”功能的多种方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • 手机浏览器唤起微信分享(JS)

    手机浏览器唤起微信分享(JS)

    这篇文章主要介绍了手机浏览器唤起微信分享功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • JavaScript获取当前页面上的指定对象示例代码

    JavaScript获取当前页面上的指定对象示例代码

    这篇文章主要介绍了JavaScript获取当前页面上指定对象的方法,需要的朋友可以参考下
    2014-02-02
  • JavaScript正则表达式小结(test|match|search|replace|split|exec)

    JavaScript正则表达式小结(test|match|search|replace|split|exec)

    这篇文章主要介绍了JavaScript正则表达式小结(test|match|search|replace|split|exec)的相关资料,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2016-12-12
  • javascript数组中的concat方法和splice方法

    javascript数组中的concat方法和splice方法

    这篇文章主要介绍了javascript数组中的concat方法和splice方法,concat方法作用合并数组,可以合并一个或多个数组,会返回合并数组之后的数据,不会改变原来的数组,更多相关内容需要的小伙伴可以参考下面文章内容
    2022-03-03
  • Javascript中异步等待的深入理解

    Javascript中异步等待的深入理解

    Async / Await是人们期待已久的JavaScript功能,它使使用异步功能更加有趣和易于理解。这篇文章主要给大家介绍了关于Javascript中异步等待的相关资料,需要的朋友可以参考下
    2021-05-05
  • el-select加上搜索查询时限制开头空格输入的解决方案

    el-select加上搜索查询时限制开头空格输入的解决方案

    这篇文章主要介绍了el-select加上搜索查询时,限制开头空格输入的解决方案,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • 深入浅析JavaScript中的3DES

    深入浅析JavaScript中的3DES

    本篇文章主要介绍了"javascript中的3des,主要涉及到方面的内容,介绍的非常详细,具有参考借鉴价值,对于js 3des教程感兴趣的同学可以参考一下
    2016-08-08
  • uniapp中uni-popup的具体使用

    uniapp中uni-popup的具体使用

    本文主要介绍了uniapp中uni-popup的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • 微信小程序实现下拉选项框

    微信小程序实现下拉选项框

    这篇文章主要为大家详细介绍了微信小程序实现下拉选项框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论