首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序搜索框代码组件

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

作者头像
达达前端
发布2019-08-25 19:36:36
1.8K0
发布2019-08-25 19:36:36
举报
文章被收录于专栏:达达前端达达前端

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};
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.08.24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档