微信小程序 实现搜索 瀑布流加载

1.在wxml页面添加搜索框 并添加事件

<input placeholder="搜索" bindinput="search"/>

2.触发事件之后 获取value数据 判断value是否有值，如果有值发list请求 如果没有发search请求

search(e){
        let that = this
//获取搜索框的值
        let value = e.detail.value;
        let token = wx.getStorageSync('token');
//判断搜索框是否有内容
        if(!value){
            wx.request({
                url: 'http://www.www.com/index.php/list',
                data:{
                    pagesize:10,
                    page:page
                },
                header:{
                  token:token
                },
                success(e){
                  that.setData({
                      data:e.data.data.data,
                      last_page:e.data.data.last_page
                  })
                }
              })
        }else{
          that.setData({searchs:value})
            clearTimeout(this.TimeID);
        this.TimeID = setTimeout(()=>{
        //    发送搜索请求
        wx.request({
          url: 'http://www.week.com/index.php/search',
          data:{
            value:value,
            pagesize:10
          },
          header:{
            token:token
          },
          success(e){
            console.log(e)
            that.setData({
                data:e.data.data.data,
                last_page:e.data.data.last_page,
                value:value
            })
          }
        })
        },1000);
        }
        
        
    },

3.加载更多

onReachBottom: function () {
        let that = this;
        let searchs = this.data.searchs;
        let value = this.data.value
        let token = wx.getStorageSync('token');
        // 获取下一页
        let page = that.data.page+1;
        if(page>this.data.last_page){
            wx.showToast({
                title: '到底了',
                icon: 'error',
            })
        }
        if(!searchs){
          wx.request({
            url: 'http://www.week.com/index.php/list',
            data:{
                pagesize:10,
                page:page
            },
          header:{
            token:token
          },
            success(e){
              that.setData({
                  page:that.data.page+1,
                  data:that.data.data.concat(e.data.data.data)
              })
            }
        })
        }else{
          wx.request({
            url: 'http://www.week.com/index.php/search',
            data:{
                pagesize:10,
                page:page,
                value:value
            },
            header:{
              token:token
            },
            success(e){
              that.setData({
                  page:that.data.page+1,
                  data:that.data.data.concat(e.data.data.data)
              })
            }
        })
        }
    },

最后

以上就是帅气玉米为你收集整理的微信小程序 实现搜索 瀑布流加载的全部内容，希望文章能够帮你解决微信小程序 实现搜索 瀑布流加载所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。