微信小程序实现滚动分页加载更多 - xieqing

微信小程序实现滚动分页加载更多

参考网址：https://www.cnblogs.com/Smiled/p/8203306.html

1、wxml：

 <view class=\'myScroll\' style=\'float:left;\'> 
			 <scroll-view scroll-y=\'true\' style="height:{{height}}px" bindscrolltolower=\'lower\'  >
			    <!--分类 下部分 图文列表 -->
							<view class="appointment">
							  <view class="app-moduler">
							    <navigator url="/pages/detail/detail?id={{item.id}}" wx:for="{{imageList}}" wx:key="id" class="mod-item" >
							      <!-- <view class="mod-signup">
							        <image src="{{signupimg}}"></image>
							      </view> -->
							      <view class="mod-img" >
							        <image src="{{yuming+item.image}}" class="mod-image" ></image>
							      </view>
							      <view class="mod-title">
							         <text>{{item.title}}  </text>  
							      </view>
							      <view class="mod-info">
							        <view class="mod-icon">
							          <image src="{{iconsrc}}" class="icon"></image>
							        </view>
							        <view class="moinfont">{{item.description}}</view>
							      </view>
							    </navigator>
							    
							   </view>
							</view>
			<!-- 图文列表结束 -->
			</scroll-view>   
    </view>

　　2、js：

data: {  
    imageList: [ ],
    ids:[0,0,0,0,0], 
    inputValue: \'\', //搜索的内容 
    height:0 
  }
,
onLoad(){
 // 初始化所有图片的图片列表
            wx.request({
              url: \'数据接口\',
              data: {
                pagenumber: 1,
                pagesize: 6,
              },
              method: \'POST\',
              header: {
                \'content-type\': \'application/x-www-form-urlencoded\' // 默认值
              },
              success(res) {
                // var myOldData=that.data.imageList;
                var mydata = res.data.data;
                that.setData({
                  imageList: mydata
                })
               
              }
            })
            // 初始化图片列表  结束 
    // 初始化 高度    
    wx.getSystemInfo({
      success: (res) => {
        
        that.setData({
          height: res.windowHeight
        })
      }
    }) 
  },
, 
  lower() {
    var that = this;
    var result = that.data.imageList;
    var pagenumber=result.length/6+1; 
    // 加载图片列表
    if (pagenumber < 2) {
      return false;
    } else {
    wx.request({
      url: \'数据接口\',
      data: {
        pagenumber: pagenumber,
        pagesize: 6,
        ids:that.data.ids,
        title: that.data.inputValue
      },
      method: \'POST\',
      header: {
        \'content-type\': \'application/x-www-form-urlencoded\' // 默认值
      },
      success(res) {
        // var myOldData=that.data.imageList;
        var mydata = res.data.data;
        var cont = result.concat(mydata);
        if (mydata.length==0){
          wx.showToast({ //如果全部加载完成了也弹一个框
            title: \'没有数据了\',
            image:"/images/warn.png",
            duration: 300
          });
          return false;
         } 
        if (cont.length >= 100) {
          wx.showToast({ //如果全部加载完成了也弹一个框
            title: \'加载的太多了\',
            icon: \'success\',
            duration: 300
          });
          return false;
        } else {
          wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中”  
            title: \'加载中\',
            icon: \'loading\',
          });
          setTimeout(() => {
            that.setData({
              imageList: cont
            });
            wx.hideLoading();
          }, 1500)
        }
      }
    })
    //

加载图片列表 结束 
 }

}

　　遇到的问题 ：z-index=1 的组件 和 在普通流中的元素 冲突 目前还不明白  就把普通流元素变成float：left（就是scroll元素）