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

偏执的太偏执、 2021-07-24 23:39 528阅读 0赞

search.wxml

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};

###  ###

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

###  ###

## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ ##

### 欢迎关注[达叔小生][Link 1]的简书！ ###

**这是一个有质量，有态度的博客**

![博客][20190824234755245.jpeg]

[Link 1]: https://www.jianshu.com/u/c785ece603d1
[20190824234755245.jpeg]: /images/20210724/993d08b652134f4e9e8d319a07f7b3a9.png