微信小程序之搜索分页

直接上代码：
wxml:

<wxs src="../wxs/changeimg.wxs" module="changeimg" />
<view class="container">
    <view class="search_input">
          <image class="back" src="" mode="widthFix"></image>
          <input type="text" class="weui-input" maxlength="10" placeholder="搜索" value="{{value}}"  bindinput="changeModel" bindconfirm="search" data-key="value"/>
  <image class="scan_code"  src="" mode="widthFix" ></image>
</view>  
<!--搜索菜品做法列表  -->
<view class="modus_operandi">
<view class="search_no" wx:if="{{searchLen==0&&clickEnter==1}}" >
  <text>很抱歉,没有找到您要搜索的资料/(ㄒoㄒ)/~~</text>
</view>
  <view class="modus_operandi_total"
  wx:for="{{searchData}}"
  wx:key="id"
  bindtap="jumpVegetables"
  data-cid="{{item.classid}}"
  >
    <image class="modus_operandi_pic" mode="widthFix" src="{{changeimg.getimageurl(item.defaultpic)}}"></image>
    <view class="modus_operandi_title">{{item.title}}</view>
  </view>
</view>
</view>

wxss:

page{
    background: #fff;
}
.back{
    width: 20rpx;
    height: 20rpx;
    margin-top: 39rpx;
    margin-right: 20rpx;
    margin-left: 20rpx;
}
.search_input {
    height: 110rpx;
    padding: 10rpx;
    background: url("https://mini.qianjiwang.cn/img/top.png")no-repeat center;
    background-size: 100% 700rpx;
    display: flex;
    position: relative;
  }
  .search_input input {
 height: 70rpx;
 background-color: #fff;
 border-radius: 50rpx;
 font-size: 32rpx;
 color: #000;
 width: 80%;
 margin-left: 0rpx;
 background: #a7d9fe;
 margin-top: 20rpx;
 padding-left: 30rpx;
  }
  .scan_code{
      flex: 1;
    width: 40rpx;
    height: 40rpx;
    margin-left: 30rpx;
    margin-top: 27rpx;
    
}
.modus_operandi{
    padding: 20rpx;
    display: flex;
    flex-wrap: wrap; 
    margin-top: 50rpx;
  }
  .modus_operandi_total{
    width: 47%;
    padding: 10rpx;
  }
  .modus_operandi_pic{
    height:215rpx!important;
    border-radius: 10rpx;
  }
  .modus_operandi_title{
    text-align: center;
  }

js:

// pages/pro/index.js
import menuData from "../../bindData/rightMenuCtrl.js"
import proData from "../../bindData/searchFoodData.js"
Page({
  /**
   * 页面的初始数据
   */
  data: {
    pageName: "",
    ShowLonding: { londing: false, message: "", contNone: false },
    ...menuData.data,
    ...proData.pageData
  },
  ...menuData.Methods,
  ...proData.methods,

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  /*   wx.showLoading({
      title: '正在加载...',
    });
   setTimeout(()=>{
     wx.stopPullDownRefresh,
     wx.hideLoading();
   },2000) */
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    /* wx.showToast({
      title: '没有更多数据',
    }) */
    let that =this
    that.getHttpProductMore();
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

searchFoodData.js:

var httpClient = require('../utils/HttpClient.js');
var tools = require('../utils/util.js');
import url from "../utils/apiUrl.js"
var pageData = {
    inputValue:{},
    searchData:{},
    searchLen:'',
    clickEnter:'0',
};
var ispage = true;
var indexpage = 1;//页数默认为1
var methods = {
      //分页
  getHttpProductMore: function () {
    var self = this;
    if (ispage) {
      ispage = false;//没有下一页ispage 赋值为false
      indexpage++; //页数加1
      let searchData= this.data.inputValue.value//获取输入框的值
      //console.log('页',indexpage);
      wx.showLoading({
        title: '正在加载...',
      });
      httpClient.get(url.getSearchVegetables+"?cid="+"&Key="+searchData+"&pageId="+indexpage).then(function (o) {
          //console.log("更多的数据",o);
        if (o.length > 0) {//如果长度大于0，使用concat连接起来，ispage赋值为true
          var tempData = self.data.searchData;
          tempData = tempData.concat(o)
          self.setData({ searchData: tempData })
          ispage = true;
          wx.hideLoading()
        }
        else {
          wx.showToast({
            title: '没有更多了',
          });
          indexpage = 1;
        }
      });
    }
  },
    search(e){
        ispage = true
        wx.showLoading({
            title: '正在加载...',
          });
          let searchData= this.data.inputValue.value
          console.log('搜索的数据',searchData);
          let that=this
          let clickEnter=1
          httpClient.get(url.getSearchVegetables+"?cid="+"&Key="+searchData+"&pageId=1").then(function(r){
            wx.hideLoading();
            //console.log("搜索数据",r);
            let  searchData=r
            let  searchLen=r.length
            that.setData({
              searchData,
              searchLen,
              clickEnter
            })
          })
    } ,
    changeModel(e){
        let data={};
        data[e.currentTarget.dataset.key] = e.detail.value
        this.setData({
            inputValue:data
        })
        //console.log(data);
       // console.log('data',this.data.inputValue);
    }  ,
    jumpVegetables(e){
      const {cid}=e.currentTarget.dataset
      wx.navigateTo({
        url: '/pages/vegetable-index/vegetable-index?cid='+cid,
        success: (result)=>{
          
        },
      });
    }
}

module.exports = {
  pageData: pageData,
  methods: methods

}

有什么不对的请指正，第一个线上小程序，或者更好的方法请留言给我