欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

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

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

代码如下

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

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