微信小程序實現滾動分頁加載更多

參考網址：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元素）