小程序，分页，搜索

html

<view class="search">
    <image class="search_icon" src="/images/search.png" alt=""></image>
    <input class="search_input" type="text" placeholder="请输入员工姓名" bindinput="inputKeywords" data-keywords="{{keywords}}" bindconfirm='go_to_search'/>
</view>
<view class="other_container">
    <view class="add_employee">
        <view class="left">
            <image src="/images/add_employee.png" alt=""></image>
            添加员工信息
        </view>
        <image src="/images/common/arrow-right.png" alt="" class="right"></image>
    </view>
    <view class="employee_num">共{{total_count}}人</view>
</view>
<block wx:if="{{lists != ''}}">
    <block wx:for="{{lists}}">
        <view class="list_item">
            <view class="left">
                <view class="head">{{item.first_char}}</view>
                <view class="left_content">
                    <view class="name">{{item.name}}</view>
                    <view class="phone_number">{{item.telephone}}</view>
                </view>
            </view>
            <image src="/images/common/arrow-right.png" alt="" class="right"></image>
        </view>
    </block>
</block>
<block wx:else>
    <image class="kong" src="/images/common/kong.png"></image>
    <view class="kong_words">暂无消息</view>
</block>

js

var getData = require('../../utils/getData.js');
var util = require('../../utils/util.js');
const tips = require('../../common/tips.js');
const app = getApp();
var session = require('../../common/auth/session.js');

Page({
  go_to_search:function(e) {
    // 初始化
    this.setData({
      page: 1,
      lists:[]
    });
    this.get_lists();
  },

  inputKeywords:function(e) {
    this.setData({
      keywords: e.detail.value
    });
  },

  /**
   * 页面的初始数据
   */
  data: {
    total_page: 1,
    current_page: 1,
    page: 1,
    page_size: 10,
    lists: [],
    keywords: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.get_lists();
  },

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

  },

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

  },
  get_lists: function () {
    var that = this;
    let { page, page_size, total_page , keywords } = that.data;

    if (total_page < page) {
      console.log('已经没数据了');
      return;
    }

    tips.showLoading('加载中');

    let token = session.getData('token');

    getData.getData('employee_list', {
      token: token,
      page: page,
      page_size: page_size,
      name: keywords,
    }, function (data) {

      tips.hideLoading();
      if (data.errno) {
        return tips.showModel("提示", data.errdesc);
      }

      that.setData({
        total_page: data.data.total_page,
        lists: that.data.lists.concat(data.data.data_list), //data.data,
        total_count: parseInt(data.data.total_count),
        page: parseInt(data.data.current_page) + 1
      });


    });

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    var that = this;
    that.get_lists();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    var that = this;
    that.get_lists();
  },

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

  }
})