微信小程序上拉加载下拉刷新值scroll-view

Hello，大家好！上次更新的也上拉刷新，下拉加载的效果，只不过今天用的是小程序scroll-view的组件。首先我们了解一下此组件的属性。

1、首先，要使用scroll-view组件，纵向滚动，我们要给scroll-view设置一个固定的高度。否则无法触发我们绑定的时间，这个是必须的。

2、我们先看一下代码吧，css代码我就不贴出来了，大家自己动手谢谢吧！

   <scroll-view class="scroll_container" scroll-y="true" bindscrolltoupper="refresh"          bindscrolltolower="loadMore">

       <navigator class='box' hover-class='none' wx:for="{{list}}" data-id="{{item.id}}" >

                <view class='box_left'><image src='{{item.itemIconUrl}}'></image></view>

      <view class='box_right'>

              <view class='over1 sname'>【{{item.sname}}】{{item.sdescription}}</view>

              <view class='price'>

                  <view class='promotePrice'>￥{{item.promotePrice}}</view>

                 <view class='itemprice'>￥{{item.price}}<view class='line'></view></view>

              </view>

    <view class='makemoney'>

               <view class='make'>￥{{item.promotePrice*0.05}}</view>

               <view class='promote'>保险</view>

    </view>

</view>

      </navigator>

</scroll-view>

JS代码：

 onLoad: function(options) {

var that = this;

var data = { doctorUserIdKey: '001' }

http.httpGet('doctor/getDoctorUserId', data, function (res) {

success: {

var doctorUserId = res.data.doctorUserId;

var data = { doctorUserId: doctorUserId, categoryId: 0, hot: 0}

http.httpGet('接口', data, function (res) {

console.log(res);

success:{

that.setData({

list:res.data.list,

page: res.data.page

})

}

})

}

})

},

refresh:function(e){

},

loadMore:function(e){

var that = this;

var page = that.data.page;

var page_size = page.page_size;

var all_count = page.all_count;

console.log(all_count);

console.log(page_size)

if(page_size<=all_count){

如果数据的总数大于每页的数据量，那么数据量每次+10，

弹窗显示数据正在加载，模拟原生加载。

var page_size = page_size+10;

var data = { doctorUserIdKey: '001' }

http.httpGet('接口', data, function (res) {

success: {

wx.showToast({

title: '数据正在加载',

icon: 'loading',

duration: 1000

})

var doctorUserId = res.data.doctorUserId;

var data = {参数}

http.httpGet('接口', data, function (res) {

console.log(res);

success: {

that.setData({

list: res.data.list,

page: res.data.page

})

}

})

}

})

} else if (page_size>all_count){

如果数据的总数小于每页的数据量，

弹窗显示数据没有更多，模拟原生加载。

wx.showToast({

title: '没有更多数据了',

icon: 'none',

duration:1000

})

}

},

共享知识，共同进步

转载于:https://juejin.im/post/5be3cf9be51d454b8029862e