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

104 阅读 0 评论 69 点赞

我是靠谱客的博主帅气玉米，这篇文章主要介绍微信小程序实现搜索瀑布流加载，现在分享给大家，希望可以做个参考。

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

复制代码

1
<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);
        }
        
        
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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)
              })
            }
        })
        }
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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)
              })
            }
        })
        }
    },