美文网首页
小程序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