微信小程序 搜索框组件代码实例


Posted in Javascript onSeptember 06, 2019

这篇文章主要介绍了微信小程序 搜索框组件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

代码如下

search.wxml

<view class="header">
  <view class="search">
    <icon type="search" size="18" color="">

    </icon>
    <input type="text" confirm-type="search" bindconfirm="onConfirm" value="{{value}}" />
    <icon type="clear" size="18" bind:tap="onToggle" />
  </view>
  <button bind:tap="onCancel" plain="{{true}}" class="cancel">取消</button>
</view>
<view class="container" wx:if="{{!isSearch}}">
  <view class="title">
    <view class="line"></view>
    <text>历史搜索</text>
  </view>
  <view class="history-container">
    <block wx:for="{{words}}" wx:key="{{index}}">
      <v-tag content="{{item}}" bind:comment="onConfirm"></v-tag>
    </block>
  </view>
  <view class="title">
    <view class="line"></view>
    <text>热门搜索</text>
  </view>
  <view class="history-container">
    <block wx:for="{{hots}}" wx:key="{{index}}">
      <v-tag content="{{item}}" bind:comment="onConfirm"></v-tag>
    </block>
  </view>
</view>
<view class="result" wx:if="{{isSearch}}" >
  <block wx:for="{{books}}" wx:key="index">
    <v-book book="{{item}}"></v-book>
  </block>
</view>

search.wxss

.header{
  position: fixed;
  top:0;
  left: 0;
  z-index: 300;
  height:100rpx;
  display: flex;
  padding-left:20rpx;
  padding-right:20rpx;
  align-items: center;
  border-top: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;
  flex-direction: row;
  background: #fff;
}
.search{
  width:530rpx;
  height:70rpx;
  background: rgb(245, 245, 245);
  border-radius:30rpx;
  padding-left: 20rpx;
  display: flex;
  align-items: center;
}
.search input{
  flex:1;
  margin-left: 20rpx;
}
.cancel{
  height:70rpx;
  border-radius: 30rpx;
  line-height: 70rpx;
  border-color: #888;
}
.container{
  margin-top: 100rpx;
  padding: 20rpx;
}
.title{
  display: flex;
  height:90rpx;
  align-items: center;
}
.line{
  height:40rpx;
  width:10rpx;
  background: #333;
}
.result{
  margin-top: 100rpx;
  padding-left:90rpx;
  padding-right:90rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
v-book{
  margin-bottom: 60rpx;
}

search.js

// components/search/search.js
import { Keyword } from "../../models/keyword";
import { BookModel } from "../../models/book";
const keyword = new Keyword();
const bookModel = new BookModel();
Component({
 /**
  * 组件的属性列表
  */
 properties: {

 },

 /**
  * 组件的初始数据
  */
 data: {
  words: [],
  hots: [],
  books:[],
  isSearch:false,
  //给输入的默认值
  value:""
 },

 /**
  * 组件的方法列表
  */
 methods: {
  onConfirm(event) {
   let value = event.detail.value;
   // 只有在服务器上能搜索到的关键字才添加到缓存中
   bookModel.getBookSearch(0, value).then(res => {
    if (res.total) {
     keyword.addHistory(value);
     let words = keyword.getHistory();
     this.setData({
      words,
      books:res.books,
      isSearch:true
     })
    }// console.log(res);
   })
  },
   onToggle() {
   this.setData({
    value: "",
    isSearch:false
   })
  },
  onCancel() {
   this.setData({
    isSearch: false
   })
  }
 },
 attached() {
  // keyword.getHistory();
  this.setData({
   words: keyword.getHistory()
  })
  keyword.getHotData().then(res => {
   // console.log(res.hot);
   this.setData({
    hots: res.hot
   })
  })
 }
})

models/keyword

import {HTTP} from "../utils/http-p";
class Keyword extends HTTP{
  getHistory(){
    const words = wx.getStorageSync('q')
    if(words){
      return words
    }else{
      return [];
    }
  }
  addHistory(value){
    var words = this.getHistory();
    const has = words.includes(value);
    if(value && !has){
      if(words.length>4){
        words.pop()
      }
      words.unshift(value);
      wx.setStorageSync('q', words)
    }
  }
  getHotData(){
    return this.request({
      url:`/book/hot_keyword`
    })
  }
  getKeyword(start,value){
    return this.request({
      url:`/book/search`,
      data:{
        start,
        q:value
      }
    })
  }
}
export {Keyword}

models/book

import {HTTP} from "../utils/http-p";
class BookModel extends HTTP{
  getHotBook(){
    return this.request({
      url:"/book/hot_list"
    })
  }
  getBookDateil(id){
    return this.request({
      url:`/book/${id}/detail`
    })
  }
  getBookComment(id){
    return this.request({
      url:`/book/${id}/short_comment`
    })
  }
  getBookLike(id){
    return this.request({
      url:`/book/${id}/favor`
    })
  }
  // 新增短评
  addNewComment(id,content){
    return this.request({
      url:`/book/add/short_comment`,
      method:"POST",
      data:{
        book_id:id,
        content
      }
    })
  }
  // 获取搜索结果
  getBookSearch(start,value){
    return this.request({
      url:`/book/search`,
      data:{
        start,
        q:value
      }
    })
  }
}
export {BookModel};

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

Javascript 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
自己做的模拟模态对话框实现代码
May 23 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
Javascript实现计算个人所得税
May 10 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 #Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 #Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 #jQuery
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 #Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 #Javascript
layui 弹出删除确认界面的实例
Sep 06 #Javascript
vue-cli3跨域配置的简单方法
Sep 06 #Javascript
You might like
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
React优化子组件render的使用
2019/05/12 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
python统计一个文本中重复行数的方法
2014/11/19 Python
python装饰器decorator介绍
2014/11/21 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
苹果台湾官网:Apple台湾
2019/01/05 全球购物
护理毕业生自荐信范文
2013/12/22 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
文员岗位职责
2015/02/04 职场文书