美文网首页
小程序scroll-view 无线加载

小程序scroll-view 无线加载

作者: sunflower_07 | 来源:发表于2020-03-05 10:23 被阅读0次

    无线加载,样式自己写,效果如下

    //html:
    
      <scroll-view scroll-y="true" style="width: 100%; height: 100vh; overflow: auto;"
     lower-threshold="50"  bindscrolltolower="scroll" >
        <view class="task-list" v-for="(it,index) in listDataAll" :key="index">
            <view class="list-1" >
                <view class="line-d"></view>
                <view class="text">
                    <view class="text-in">
                        <view class="in-1">{{it.contactsName}} {{it.mobilePhoneNum}}</view>
                        <view class="in-2">
                             <img v-if="it.emergent" class="icon"  src="@/static/urgent.jpg" alt="" />
                        </view>
                        <view class="in-3">
                            <view class="button-h" :class="{'button-h-deal':it.status<=20}" 
                             v-if="it.status<=20">{{it.statusName}}</view>
                             <view class="button-h" :class="{'button-h-g':it.status==40}" 
                             v-if="it.status==40">{{it.statusName}}</view>
                             <view class="button-h" v-if="it.status>=70">{{it.statusName}}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="list-2">
                <view class="in-1"><img class="icon-l" src="@/static/ad-l.png" alt=""/>地点:</view>
                <view class="in-2">{{it.spaceName}}</view> 
            </view>
            <view class="list-2">
                <view class="in-1"><img class="icon-l" src="@/static/ad-e.png" alt=""/>描述:</view>
                <view class="in-2">{{it.remark}}</view> 
            </view>
            <view class="list-3">{{it.createTime}} </view>
        </view>
    
          <view v-if="overShow" 
          style="width: 100%; text-align: center; font-size: 24rpx; color:#999999;
    padding-bottom: 20rpx;">数据加载完</view>
    </scroll-view>
    
    //js
    overShow:false,
     scroll(event){
               this.listParmas.pageNum =  parseInt(this.listParmas.pageNum)+1;
                       this.listApi(this.listParmas);//请求你自己的接口
          },
    
    
    效果图

    相关文章

      网友评论

          本文标题:小程序scroll-view 无线加载

          本文链接:https://www.haomeiwen.com/subject/jujtrhtx.html