uniapp——scroll-view組件+u-loadmore 上拉刷新

<template>
    <view class='downLoad'>
        <view class="ul" v-if="dataList.length>0">
            <scroll-view
              scroll-y="true"
              style="height: 100vh;"
              @scrolltolower="handleScrolltolower">
              <view class="li" v-for="(item,index) in dataList" @click="toDetails(item.sighType)">
                  <view class="leftBox"><image src="../../static/salesTools/pactIcon.png" mode=""></image></view>
                  <view class="rightBox">
                      <view class="left"><text class="p1">{{item.infirmaryName}} <image @click.stop="showPopup" src="../../static/salesTools/sigh.png" mode=""></image></text><text class="p2">簽署人群：{{item.docName}}</text></view>
                      <view class="right" @click.stop="share"><text>分享</text></view>
                  </view>
              </view>
              <u-loadmore :status="status" :margin-bottom="20"/>
            </scroll-view>
        </view>
        <!-- 沒有更多數據 -->
        <view class="noData"  v-else>
            <empty srcStr="../../static/common/no_hospital.png" title="暫無資料~" @emptyFn='emptyFn'></empty>
        </view>
        <!-- 資料說明彈窗 -->
        <view class="popupBox">
            <u-popup v-model="isShowPopup" mode="bottom" :closeable="true" border-radius="24">
                <view class="title">資料說明</view>
                    <view class="content">
                        <scroll-view scroll-y="true" style="max-height: 81.5vh;" class="scrollBox">
                            <view>
                                <view v-for="index in 120" :key="index">
                                    第{{index}}個Item
                                </view>
                            </view>
                        </scroll-view>
                        <text v-if="isCover" class="shadowBox"></text>
                    </view>
                    
                </u-popup>
        </view>
        <!-- 分享彈窗 -->
        <share-pop :isShowSitPop='isShowShare' :showLink="true" :showWx="true" @isShowSitPop='closeShare'></share-pop>
    </view>
</template>

<script>
    import empty from "@/components/empty.vue"
    import sharePop from "@/components/share/share.vue"
    export default {
        data(){
            return {
              isShowPopup:false,//是否顯示資料說明彈窗    
              isCover:false,//是否顯示陰影
              isShowShare:false,//是否顯示分享彈窗
              dataList:[
                  {
                      sighType:'天津紅康雲勞務合同',
                      signature:'醫生',
                  }
              ],
              status: 'loadmore',//初始加載狀態
              page: 1,//默認頁數
              row: 10,//一頁加載數據條數    
              state: 1,//請求狀態修改：1，可請求；2，不可請求
              srId:'',//助理ID
            }
        },
        onShow (){
              
        },
        onLoad (option){
            this.srId=option.srId
            this.getData()  
        },
        mounted() {
            //獲取彈窗內容的高度添加文案陰影
            this.getHospital()
            setTimeout(()=>{
                this.page++
                this.state=1
                this.getData()  
            },1000)
        },
        methods: {
             //  請求接口，獲取數據
             getData(){
                 let that=this
                 if(that.status == 'nomore'){
                     return false
                 }
                 if(that.state == 2){
                     return false
                 }
                 that.state=2
                 
                 let params={
                     page:this.page,
                     row:this.row,
                     memberId: 'o9X5RwYy_6ow7-I_VRtbLUP9RIrs'
                 }
                 
                uni.request({
                      url: `自己的請求接口`,
                      method: 'POST',
                      data: params,
                      header:{
                        'Content-Type': 'application/x-www-form-urlencoded'
                      },
                      success: (res)=>{
                          if(that.page==1){
                                  that.dataList=res.data.data; 
                          }else{
                                that.dataList=that.dataList.concat(res.data.data);
                                res.data.data.length < that.row ? (that.status = 'nomore') : (that.status = 'loadmore');
                                
                                                          
                          }
                          
                          
                      },
                      fail: (err)=>{
                          that.state=1
                      }
                }) 
             },
             //  滾動到底部觸發加載更多數據
             handleScrolltolower() {
                this.status = 'loading';//滑到底部的時候顯示狀態為加載中~
                this.state=1
                this.page++;
                console.log(this.page,'page');
                this.getData();//調用數據請求
                
             },
             // 跳轉資料詳情 downLoadDetails 
             toDetails(id){
                 uni.navigateTo({
                     url:`../../pages/salesTools/downLoadDetails?downId=${id}`
                 })
             },
             //獲取彈框高度
             getHospital() {
                 setTimeout(()=>{
                     let view = uni.createSelectorQuery().in(this).select(".content");
                     view.boundingClientRect(data => {
                       console.log("得到布局位置信息" + JSON.stringify(data));
                       console.log("節點高" + data.height);
                       if(data.height>400){
                           this.isCover = true
                       }else{
                           this.isCover = false
                       }
                     }).exec();
                 })
             },
             //顯示資料說明彈窗
             showPopup (){
                 this.isShowPopup=true
             },
             // 分享
             share(){
                this.isShowShare=true
                this.$forceUpdate()
             },
             //關閉分享彈窗
             closeShare(data){
                 if(data){
                     this.isShowShare = false
                    this.$forceUpdate()
                 }
             },
        },
        components:{
            empty,
            sharePop
        }
    }
</script>

<style  lang='scss' scoped>
.downLoad{
    color: $u-main-color;
    .ul{
        /* padding: 20rpx 24rpx; */
        .li{
            display: flex;    
            margin-bottom: 20rpx;
            padding:0 24rpx;
            &:first-of-type{
                padding-top: 20rpx;
            }
            .leftBox{
                image{
                    width: 92rpx;
                    height: 92rpx;
                    margin-right: 24rpx;
                }
            }
            .rightBox{
                width: calc(100% - 116rpx);
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1rpx solid #EEEEEE;
                padding-bottom: 25rpx;
                .left{
                    text{
                        display: block;
                        &.p1{
                            font-size: 32rpx;
                            image{
                                width:30rpx ;
                                height: 30rpx;
                                margin-left: 10rpx;
                                vertical-align: middle;
                            }
                        }
                        &.p2{
                            font-size: 28rpx;
                            color: $u-tips-color;
                            padding-top: 8rpx;
                        }
                    }
                    
                }
                .right{
                    width: 108rpx;
                    height: 64rpx;
                    border-radius: 32rpx;
                    border: 2rpx solid $u-type-primary;
                    font-size: 28rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color:$u-type-primary ;
                }
            }
        }
    }
    .popupBox{
        /deep/ .u-close--top-right{
            top: 34rpx;
        }
        /deep/ .u-icon__icon{
            color: $u-main-color!important;
        }
        .content{
            line-height: 42rpx;
            padding:0 24rpx  50rpx;
            font-size: 28rpx;
            color: #666666;
            position: relative;
        }
    }
    .title{
        font-size: 32rpx;
        color: $u-main-color!important;
        margin:36rpx auto 30rpx;
        text-align: center;
    }
    .shadowBox{
        width: 100%;
        height: 30rpx;
        background: linear-gradient(0deg, #FFFFFF 25%, rgba(255, 255, 255, 0) 100%);
        position: absolute;
        left: 0;
        bottom: 40rpx;
    }
    
}
</style>