小程序上拉加载

1.wxml

<view class="taskdistribute">

  <view class="search" style="display:flex">

  <input  bindinput="changeCarNum" value="{{CarNum}}" placeholder="请输入车牌号，支持模糊查询"></input><button bindtap="getTaskList">查询</button>

  </view>

  <scroll-view scroll-y class="scroll-c taskList" bindscrolltolower='loadCommuteDataMore'>

      <view class="ListCon">

        <view class="con"><text>万师傅</text><text>沪A12345</text><text>1888888888</text></view><button class="changeDriver" bindtap="workDistribute" data-id='{{index}}'>指派</button> 

      </view>

      <view class="ListCon">

        <view class="con"><text>万师傅</text><text>沪A12345</text><text>1888888888</text></view><button class="changeDriver" bindtap="workDistribute" data-id='{{index}}'>指派</button> 

      </view>

  </scroll-view>

  <view style="z-index:2" class="v-placeholder" wx:if="{{commuteList.length == 0}}">搜索结果为空</view>

</view>

 

2.wxss

page{

  height: 100%;

}

.taskdistribute{

  background:#f1f1f1;

  /* padding: 20rpx; */

  font-size: 26rpx;

  display: flex;

flex-direction: column;

align-items: center;

height: 100%;

 

}

.taskList{

  display: flex;

  flex:1;

}

.taskdistribute input{

  width: 500rpx;

  border: 1px solid #ccc;

  margin-left: 10rpx;

  border-radius: 8rpx;

  background: #fff;

  padding: 3rpx 10rpx;

  height: 50rpx;

}

.taskdistribute button{

  font-size: 24rpx;

  margin:0;

  margin-left:20rpx;

  padding-left: 55rpx;

  padding-right: 55rpx;

  color: #fff;

  background: #618BDF;

}

.taskdistribute .search{

  display: flex;

  justify-content: center;

  align-items: center;

  margin-top: 20rpx;

}

.ListCon{

  margin: 20rpx;

  background: #fff;

  border-radius: 10rpx;

  padding: 20rpx 30rpx;

  position: relative;

  display: flex;

}

.ListCon .con{

  line-height: 40rpx;

  display: flex;

  width: 500rpx;

}

.ListCon .con text{

  flex: 1;

}

.taskdistribute .changeDriver{

  width:150rpx;

  padding: 0 10rpx;

  line-height: 50rpx;

  /* border-radius:4rpx ; */

  position: absolute;

  right: 30rpx;

  bottom: 15rpx;

}

 

3.js

var pageIndex = 0

var pageSize = 10

  loadCommuteDataMore: function() {

    pageIndex++;

    var that = this;

    var originSiteList = []

    wx.showLoading({

      title: '获取中',

      icon: 'none'

    })

    api.requestGet('url' , {},

      function(res) {

        wx.hideLoading()

        if (pageIndex != 0 && res.length == 0) {

          wx.showToast({

            title: '没有更多了',

            icon: 'none'

          })

          pageIndex--

          return;

        }

        originSiteList = that.data.commuteList;

        var newSiteList = originSiteList.concat(res);

        that.setData({

          commuteList: newSiteList

        })

        console.log(that.data.commuteList)

      }

  },

 

4效果图