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


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 相关文章推荐
FireFox与IE 下js兼容触发click事件的代码
Nov 20 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
详解Angular2响应式表单
Jun 14 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
js Dom实现换肤效果
Oct 21 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
Vue Element校验validate的实例
Sep 21 Javascript
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
图书管理程序(一)
2006/10/09 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
PHP常用的小程序代码段
2015/11/14 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
基于php编程规范(详解)
2017/08/17 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
python函数装饰器用法实例详解
2015/06/04 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
Python实现自动发送邮件功能
2021/03/02 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Python中的Django基本命令实例详解
2018/07/15 Python
Python接口开发实现步骤详解
2020/04/26 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
过滤器的用法
2013/10/08 面试题
写给女生的道歉信
2014/01/08 职场文书
高一学生评语大全
2014/04/25 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
父亲节活动策划方案
2014/08/24 职场文书
大学辅导员述职报告
2015/01/10 职场文书
首都博物馆观后感
2015/06/05 职场文书