vue vant上拉加载 下拉刷新
index.vue <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <div><div class="zoneBox"><!-- <p class="fl currentZone">{{currentZone}}赛区</p> --><p class="fl currentZone">全国赛区</p><!-- <p class="fr switchZone" @click="switchFun">切换赛区</p> --></div><van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" @load="onLoad"><div class="list" id="list-content"><div v-show="showlist"><div class="list_item" v-for="(item,index) in list" :key="index"><div @click="detailFun(item.shopInfo.shopId)"><div class="pic1"><van-image fit="cover" :src="item.shopInfo.shopFirstPic.firstPic" /><p>{{item.rank}}</p></div><div class="pic2"><van-image fit="cover" :src="item.shopInfo.shopInsidePics.pic1" /><van-image fit="cover" :src="item.shopInfo.shopInsidePics.pic2" /></div></div><div class="box1"><div class="fl"><p class=" shopName">{{item.shopInfo.shopName.shopName}}</p><p>{{item.votes}}票</p></div><div class="fr vote" @click="voteFun(item.shopInfo.shopId,index)">投票</div></div></div></div><div class="noList" v-show="noList"><img src="../../static/img/default.png" alt=""><p>该赛区暂无参赛信息!</p></div><div class="box"></div></div></van-list></div></van-pull-refresh>data() {return {loading: false,finished: false,isLoading: false, //是否处于下拉刷新状态,page: 1,pageSize: 10,list: [],},onLoad() {var that = this;that.page++;var page = that.page;var openId = that.openId;var areaId = '0000';that.$http.post('url', {page: page,pageSize: 10,areaId: areaId,openId: openId,}, {emulateJSON: true}).then(function(res) {that.loading = false;console.log(res)var rank = res.data.data.ranks;// that.list = res.data.data.ranks;if (res.data.data.ranks != 0) {for (var i = 0; i < rank.length; i++) {that.list.push(rank[i])}} else {that.finished = true;}}, (error) => {console.log(error);});},onRefresh() {setTimeout(() => {this.finished = false;this.isLoading = false;}, 500);},
结束语:
希望这篇文章能帮助到大家。
喜欢的加个关注,点个收藏,给个赞~ 大家一起成长
vue vant上拉加载 下拉刷新相关推荐
- php微信小程序向下滑动,微信小程序功能实现:上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
- ionic上拉加载-下拉刷新
ionic上拉加载-下拉刷新 1.上拉加载 <ion-infinite-scroll on-infinite="loadOlderStories()" distance=&q ...
- Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法...
bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件 在 使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore ...
- php mescroll,mescroll.js上拉加载下拉刷新组件使用详解
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下 使用注意事项: 1.引入的时候出问题及时看官方给出的解决方案(基本上都必须看): 2.react中一 ...
- 教你如何使用SwipeRefreshLayout来构建一个上拉加载下拉刷新框架
前言: 基本上所以的移动端应用都有Listview(当然RecyclerView也一样),那必不可少的都会嵌入一个上拉加载下拉刷新的功能.这样能大大的减少用户的流量消耗,同样对于用户也有更好的用户体验 ...
- ios 上拉加载 下拉刷新
在一款 App应用中有的时候会用到上拉加载下拉刷新的功能,本人觉得SVPullToRefresh很好用(可以用在UIScrollView上,包括UITableview和UICollectionView ...
- vue 实现上拉加载下拉刷新(思路贼清晰)
项目需要用到上拉刷新下拉加载 所以自己手动实现了一个 组件: <template><div class="my-scroll" :class="[scr ...
- h5结合vant框架,实现列表上拉加载下拉刷新
最近在做h5移动页面开发,并且需要用移动端android和ios将h5嵌进去.在开发过程中,使用了vant这个框架: vant文档:https://youzan.github.io/vant/#/zh ...
- vue 实现上拉加载下拉刷新(思路清晰)
项目需要用到上拉刷新下拉加载 所以自己手动实现了一个 组件: <template><div class="my-scroll" :class="[scr ...
- uniapp 自定义上拉加载下拉刷新组件
介绍 该组件是结合uview框架写的,主要结合了里面的u-loadmore组件,可配置下拉刷新加载圈的颜色及背景色,暂无数据时的图等,突出的特点就是通过设置组件的高度,适配刘海屏iPhone,且支持嵌 ...
最新文章
- 运维自动化------ansible搭建
- 【ElasticSearch】使用Docker安装ElasticSearch、基本增删改查使用
- 以下哪个不是python财经数据接口工具_这7种Python的全新玩法,大部分人都不知道!...
- 算法复杂度分析(下)
- Microsoft发布.NET架构指南草案
- 挑战练习10.6 实现高效的RecyclerView刷新
- js ---- 对象转JSON,JSON转对象
- 27.卷1(套接字联网API)---IP选项
- 从无到有构建计算机网络
- 打印机服务器没有响应是怎么回事啊,打印机后台程序没有运行?(打印机后台服务无法启动怎么办?)...
- Mac下移动硬盘的使用
- VTP(VLAN中继协议)简单介绍
- APP - 重磅消息!微信测试无需新手机号注册新微信号功能
- Neokylin7安装gedit
- ntoskrnl.exe 占用80端口 apache 无法启动
- 2.机器学习基础(一)
- TCP/IP 模型 与 OSI 七层模型的对应关系
- html中搜索符号,html中特殊符号
- Struts MVC 框架 (让你一步步成为高手)
- 白话——海明校验码及编码过程
热门文章
- python使用 xlwt,xlrd,xlutils库操作Excel教程
- Deepin Linux 上双显卡电脑如何关闭独显,使用核显
- 学会“放弃与妥协”,学会“自我牺牲”,学会“善待痛苦”
- Python中scatter函数参数详解
- P、NP、NPC和NP-Hard相关概念
- Errors running builder 'Integrated External Tool Builder' on project 'rVoix'
- Andorid Toast倒计时,自定义显示时间
- 数组分成两部分的计算
- 【设计模式自习室】原型模式
- 华为到底是一家什么样的公司?