微信小程序豆瓣评分实现搜索功能

components下创建自定义搜索组件searchbar

在page中的search.json文件夹中引用

定义搜索api

在自定义searchbar组件js中编写

- 在使用组件的时候， 当前使用该组件的页面想要获取组件中的某一状态或者某一个值时，需要使用到this.triggerEvent(’ ',{},{}),第一个参数是自定义事件名称，这个名称是在页面调用组件时bind的名称，第二个对象就是想要的状态和值。

在page中的search文件夹中引用该定义

• js文件中

//导入方法
const {GetSearch} = require("../../api/search")
Page({
    data: {
        list:[],
    },
    //搜索
    onLoad(options) {
    },
        // if (e.detail.value == '') {
        //     this.setData({detail: {}}) // 如果input框内的文字删除则什么也不显示
        //   } else {
        //     this.setData({ inputvalue: e.detail.value }) // 把获取到的值给inputvalue
        //   }
        onsearchinput:function(event){
            console.log(event.detail.value);
        var searchObj={
            q:event.detail.value,
            page:1
        }
        this.setData({searchObj})
        console.log(searchObj);
        GetSearch({q:searchObj.q,page:1})
        .then(res=>{
            console.log(res);
            var list  =res;
            this.setData({list})
        })
    },

结果