精华内容
下载资源
问答
  • 下拉刷新,上拉加载数据,绝对好用,是我花金币买来的,为其他小伙伴排忧解难,里面拿js模拟的实时数据,新手都能看懂,不会的私信我,我相信肯定一看就明白,最重要的是好用,好东西大家分享
  • 上下拉加载数据

    2019-01-15 14:54:57
    povertyList.html
  • uniapp局部上拉加载数据

    千次阅读 2020-12-16 17:18:44
    一、页面局部实现上拉加载数据 只有评论区可以上拉加载数据,网上找到了 vue-infinite-scroll 二、使用 官方示例 1、 npm 加载依赖 npm install vue-infinite-scroll --save 2、 单个页面引用 import infinite...

    一、页面局部实现上拉加载数据

    在这里插入图片描述

    只有评论区可以上拉加载数据,网上找到了 vue-infinite-scroll
    

    二、使用

    官方示例

    1、 npm 加载依赖

    npm install vue-infinite-scroll --save
    

    2、 单个页面引用

    在这里插入图片描述

    import infiniteScroll from 'vue-infinite-scroll'
    
    export default {
    	directives: { infiniteScroll },
    	data() {
    		return {
    			isScroll: false, // 评论区滚动
    			pageInfo: {
    				pageSize: 5, // 每页显示条数
    				pageNum: 1, // 当前页
    				pageTotal: 1, // 总页数
    				prevPageNum: 0,
    			},
    		}
    	},
    	methods: {
    		loadMore: function() {
    		  if (!this.isScroll) return false
    	
    		  setTimeout(() => {
    			  this.doMessageReplyDetails()
    		  }, 1000)
    		}, // end loadMore
    		// 获取回复详情
    		doMessageReplyDetails() {
    			const _this = this
    			if (_this.pageInfo.prevPageNum === _this.pageInfo.pageNum) return false
    			
    			let opts={
    				url: '/***',
    				method: 'POST'
    			}
    			let param={
    				id: Number.parseInt(this.commonInfo.id), // 此条留言的id-----必选
    				page: this.pageInfo.pageNum,
    				pageSize: this.pageInfo.pageSize,
    			}
    			_this.isScroll = false
    			this.HTTP.httpFromDataRequest(opts, param).then(res => {
    				if(res.data.success){
    					const { data } = res.data
    					
    					if (data.list.length === 0) return false
    					else {
    						_this.commonAreaInfo = [..._this.commonAreaInfo, ...data.list]
    					}
    					// 分页相关
    					_this.replyTotal = data.total // 总评论数
    					// 为判断是否还有数据,是否还需要上拉加载数据
    					_this.pageInfo.prevPageNum = _this.pageInfo.pageNum
    					_this.pageInfo.pageTotal = data.pages // 总页数
    					_this.doScrollStatus() // 数据取完,判断是否需要加载数据
    				}else{
    					uni.showToast({
    						title: res.data.message
    					})
    				}
    			},error => {console.log(error);})
    		},
    		doScrollStatus() {
    			if (this.pageInfo.pageNum === this.pageInfo.pageTotal) {
    				this.isScroll = false
    			} else {
    				this.pageInfo.pageNum++
    				this.isScroll = true
    			}
    		},
    	}
    
    展开全文
  • 主要介绍了vue实现的上拉加载更多数据/分页功能,涉及基于vue的事件响应、数据交互等相关操作技巧,需要的朋友可以参考下
  • 之所以发这个博客是因为网上百度了太多 没法直接套用 所以写这个 可以直接套用 先代码截图 <script type="text/javascript"> //最大页数 var mix = "${pageInfo.pages}";...

     之所以发这个博客是因为网上百度了太多  没法直接套用  所以写这个   可以直接套用   先上代码截图

    <script type="text/javascript">
    //最大页数
    var mix = "${pageInfo.pages}";
    var page = "${pageInfo.pageNum}";
    var rows = "${pageInfo.pageSize}";
    var uid = "${uid}";
    //标识
    var pagenew = 1;
    
    
    $(function(){
        $(window).scroll(function () {
            if ($(document).height() - $(this).scrollTop() - $(this).height() < 300 && pagenew == 1) {
                pagenew = 2;
                page ++;
                if(page > mix){
                    return false;
                }else{
                    ajaxpage(uid,page,rows);
                }
            }
        });
    });
    
    function ajaxpage(uid,page,rows) {
        $.post("indexx.html",{uid:uid,page:page,rows:rows}, function (data) {
            if(data.is){
                if(data.data.total != 0) {
                	$.each(data.data.list,function(index,item){
                		var detail = "";
                		var conduct= "";
                		var inde= "";
                		var qw= "";
                		if(item.workliststate==1){
                			detail = '<a class="workdes" href="workdetail.html?customerid='+item.cid+'&worklistnumber='+item.worklistnumber+'">';
                			conduct = '<a class="worklistbtn wc_btn" href="workconduct.html?id='+item.id+'&customerid='+item.cid+'">去开工</a>';
                			inde = '<a class="worklistbtn wc_btnfc" href="index.html?wid='+item.id+'&uid='+item.userweiceid+'">废除</a>';
                		};
                		if(item.workliststate==2||item.workliststate==3){
                			detail = '<a class="workdes" href="workconduct.html?id='+item.id+'&customerid='+item.cid+'">';
                		};
                		if(item.workliststate==2){
                			qw = '<input type="hidden" id="workliststatetwo" value="2">'
                				+'<a href="workconduct.html?id='+item.id+'&customerid='+item.cid+'" class="worklistbtn overbtn" onclick="workliststatetwo()">去完工</a>';
                		};
                		if(item.workliststate==3){
                			qw = '<input type="hidden" id="workliststate" value="3">'
                				+'<a href="workconduct.html?id='+item.id+'&customerid='+item.cid+'" class="worklistbtn overbtn" onclick="workliststate()">去完工</a>';
                		};
                		$("#road").append('<li>'
                				+detail
                				+'<div class="workdescon">'
                				+'<p class="work_tit">'+item.customername+'</p>'
                				+'<span class="work_num">工单编号:'+item.worklistnumber+'</span>'
                				+'<span class="work_time">'+new Date(item.createtime).Format("yyyy年MM月dd日 hh:mm:ss")+'</span>'
                				+'</div>'
                				+'</a>'
                				+conduct+inde+qw
                				+'</li>');
                	});
                    pagenew = 1;
                }
            }
        },"json");
    }
    </script>

    刚开始有几个参数,我说一下都什么参数

    pageInfo.pages是总页数

    pageInfo.pageNum是当前页

    pageInfo.pageSize是每页的数量

    至于下面的uid是我传的参数(这个不用管,根据自己的实际情况来取参传参)

    然后这个代码基本上可以套用(但是要和Mybatis的PageHelper的分页插件使用,当然,你不用分页插件也行,手写分页也很厉害,不过建议用插件,因为确实很方便,同时页面上需要的参数都有了)

    然后这段代码

    $(function(){
        $(window).scroll(function () {
            if ($(document).height() - $(this).scrollTop() - $(this).height() < 300 && pagenew == 1) {
                pagenew = 2;
                page ++;
                if(page > mix){
                    return false;
                }else{
                    ajaxpage(uid,page,rows);
                }
            }
        });
    });

    1:就是说   页面文档的高度减去当前滚动条的高度(就是滚动条底部距离屏幕最顶端的距离)和当前高度小于300px和当前页要要是分页的第一页,这些条件满足后,就会执行里面的方法,在这里我不多细说,只能给你说,套用上去就没问题(前提是能看懂js代码,不能代码给你了,什么都看不懂就瞎套,当然后台需要自己写,不会的话可以留言)这些工作做完后,就开始执行js方法

    2:就是这个方法

    ajaxpage(uid,page,rows);

     

    这个方法在上面代码里面写的有,我说一下这个js方法代码的重点,下拉刷新肯定是异步的,所以说要用JQuery的ajax方法,然后把需要显示的数据拼接上去   注意是拼接数据   这里需要用js的forEach循环(不会的话就百度一下),然后把你页面上需要的字段拼接上去,拼接这一步很考验耐心,稍微不注意,页面就炸

    3:最后用jQuery的

    $("#road").append();
    //括号里面写你要往页面上加的数据   也就是拼接的数据    
    //至于$("#road")这个就是告诉jQuery往页面上哪个节点(注意是节点)上添加数据  
    //如果这个都不懂  那还是先看jQuery的$("").append();方法吧   看明白了再回来看这个 

    至此  js已经写完    有很多人会有疑问    那页面上究竟是什么样子的   (怎么去拼接呢?)  那我把页面上的代码也贴出来

    <ul class="workul" id="road">
    			<c:choose>
    			<c:when test="${!empty pageInfo.list}">
    			<c:forEach items="${pageInfo.list}" var="item">
    			<li>
    				
    					<c:choose>
    					<c:when test="${item.workliststate==1}">
    						<a class="workdes" href="workdetail.html?customerid=${item.cid}&worklistnumber=${item.worklistnumber}">
    					</c:when>
    					<c:when test="${item.workliststate==2||item.workliststate==3}">
    						<a class="workdes" href="workconduct.html?id=${item.id}&customerid=${item.cid}">
    					</c:when>
    					</c:choose>
    					<div class="workdescon">
    						<p class="work_tit">${item.customername}</p>
    						<span class="work_num">工单编号:${item.worklistnumber}</span>
    						<span class="work_time"><fmt:formatDate value="${item.createtime}" pattern="yyyy-MM-dd HH:mm:ss" /></span>
    					</div>
    				</a>
    				<c:choose>
    					<c:when test="${item.workliststate==1}">
    						<a class="worklistbtn wc_btn" href="workconduct.html?id=${item.id}&customerid=${item.cid}">去开工</a>
    						<a class="worklistbtn wc_btnfc" href="index.html?wid=${item.id}&uid=${item.userweiceid}">废除</a>
    					</c:when>
    					<c:when test="${item.workliststate==2}">
    						<input type="hidden" id="workliststatetwo" value="2">
    						<a href="workconduct.html?id=${item.id}&customerid=${item.cid}" class="worklistbtn overbtn" onclick="workliststatetwo()">去完工</a>
    					</c:when>
    					<c:when test="${item.workliststate==3}">
    						<input type="hidden" id="workliststate" value="3">
    						<a href="workconduct.html?id=${item.id}&customerid=${item.cid}" class="worklistbtn overbtn" onclick="workliststate()">去完工</a>
    					</c:when>
    				</c:choose>
    			</li>
    			</c:forEach>
    			</c:when>
    			<c:when test="${empty pageInfo.list}">
    				<center style="padding:30% 0;color:#999;">你还没有工单哦~</center>
    			</c:when>
    			</c:choose>
    </ul>

    注意jsp页面上的C标签   在js里面就不能用C标签去遍历数据  而是要用js的forEach 

    至此    页面上拉实现加载数据  就完成了   不过我后台是用分页插件   网页面上发送   pageInfo这个数据  因为分页插件太好用了  分页插件里面每个参数啥意思   我博客里面也有   有看不懂的  可以留言

    我把后台写ajax的类也贴上来    这样就真的可以套用了

    public class AjaxMessage<T> {
    	
    	 public AjaxMessage(){}
    	 
    	 public AjaxMessage(boolean is,String msg,T data){
    		 this.msg = msg;
    		 this.data = data;
    		 this.is = is;
    	 }
    	
    	/**
    	 * 提示信息
    	 */
    	private String msg;
    	
    	/**
    	 * 返回的数�?
    	 */
    	private T data;
    	
    	/**
    	 * 是否成功
    	 */
    	private boolean is = false;

    然后生成一下get/set方法就行了

    展开全文
  • NULL 博文链接:https://1017401036.iteye.com/blog/2370719
  • 如图,微信小程序实现上拉加载,下拉刷新。代码如下 js文件代码 // pages/loading/loading.js  var p = 1  var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action";  var GetList = function ...
  • 下面这块代码是关键代码 这块我写的如果是上拉加载并且获取的数据长度大于0我在这里使用 concat 关联将数组叠加。   dataShow: that.data.dataShow.concat(res.data.content), if (that.stopLoadMoreTiem) ...

    一、开发思路

    1、使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部

    https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html可以点击链接查看scroll-view组件拥有的属性

    2、组件滑动到底部这个事件会频繁触发、所以为了防止多次触发我们定义一个状态用于管理加载的状态、如果上拉数据状态在加载中就不去做网络请求加载数据

    3、上拉的时候对page进行加1然后获取网络请求

    4、数据获取成功对获取的数据进行叠加

    二、实现代码

    1、布局

    布局中我使用了scroll-view并且使用了bindscrolltolower这个属性绑定了我的lowe函数

      <scroll-view scroll-y="true" scroll-y="{{isScroll}}" enable-back-to-top='true' bindscrolltolower='lower' style='overflow: scroll;-webkit-overflow-scrolling:touch;margin-top:130px;'>
        <block wx:key="index" wx:for="{{dataShow}}">
          <view data-index='{{index}}' class="order-item">
            <view class="contentBody">
              <view class='title'>
                {{item.company}}
              </view>
              <view class='time'>
              {{item.time}}
              </view>
              <view class='title'>
                <text>{{item.university}}</text>
                <text style='margin-left:32px'>{{item.place}}</text>
              </view>
              <view style='margin-top: 8px'>
                <text class='origin'>来源</text>
                <text class='originInfo'>{{item.university}}/就业网</text>
              </view>
            </view>
          </view>
        </block>
        <view wx:if='{{noData}}'class="noData">没有更多了~</view>
      </scroll-view>

    2、js中的实现

    stopLoadMoreTiem是我在data中定义的变量默认是false

    定义page和stopLoadMoreTiem

    下面就是布局中组件中bindscrolltolower绑定的函数、 that.getList()就是网络请求方法

    //下拉加载
      lower: function() {
        var that = this;
        if (that.stopLoadMoreTiem) {
          return;
        }
        this.setData({
          page: this.data.page + 1 //上拉到底时将page+1后再调取列表接口
        });
        that.getList();
    
      },

    网络请求方法中网络请求成功改变stopLoadMoreTiem的状态网络请求成功没有数据的时候我给nodata赋值了 ,nodata布局中负责显示没有更多数据 布局的显示

    /**
       * 请求网络获取列表数据
       */
      getList() {
        var that = this;
        that.stopLoadMoreTiem = true;
        // if (!that.stopLoadMoreTiem) {
         
        // }
        wx.showLoading({title:'数据读取中...'})
        wx.request({
          url: app.globalData.apiHost + '/page?page=' + that.data.page + '&size=10',
          method: 'GET',
          data: {
            queryStartDate: that.data.queryStartDate,
            queryEndDate: that.data.queryStartDate,
          },
          header: {
            'Accept': 'application/json'
          },
          success: function(res) {
            wx.hideLoading();
            if (!res.data.content || res.data.content.length === 0) {
              that.setData({
                noData: true,
              })
              return;
            }
            if (that.stopLoadMoreTiem) {
              if (res.data.content && res.data.content.length > 0) {
                that.setData({
                  dataShow: that.data.dataShow.concat(res.data.content),
                  total: res.data.totalElements,
                })
              }
            } else {
              that.setData({
                dataShow: res.data.content,
                total: res.data.totalElements,
              })
            }
            that.stopLoadMoreTiem = false;
          }
        })
      },
    

    下面这块代码是关键代码 这块我写的如果是上拉加载并且获取的数据长度大于0我在这里使用concat关联将数组叠加。

     dataShow: that.data.dataShow.concat(res.data.content),

    if (that.stopLoadMoreTiem) {
              if (res.data.content && res.data.content.length > 0) {
                that.setData({
                  dataShow: that.data.dataShow.concat(res.data.content),
                  total: res.data.totalElements,
                })
              }
            } else {
              that.setData({
                dataShow: res.data.content,
                total: res.data.totalElements,
              })
            }

    以上就是上拉加载更多的数据有问题请留言下拉刷新也很简单使用bindscrolltoupper这个属性

    送上一波福利

    微信公众号开发、企业建站开发、小程序、vue、h5、css3、react等前端视频学习资料关注公众号【码兄】免费获取

    展开全文
  • 微信小程序实现上拉加载数据

    千次阅读 2020-08-28 14:31:06
    在我做微信小程序的时候,遇到了上拉刷新数据的问题,一般是通过翻页进行。微信官方文档已经给了一个下拉触底的方法:onReachBottom()具体实现方法看代码吧! 1、首先在data里定义一下返回数据data,和翻页的页数...

    在我做微信小程序的时候,遇到了上拉刷新数据的问题,一般是通过翻页进行。微信官方文档已经给了一个下拉触底的方法:onReachBottom()具体实现方法看代码吧!
    1、首先在data里定义一下返回数据data,和翻页的页数pagenum

      data: {
        datalist: [], //.wxml文件需要绑定的列表,我这里用的数据类型是数组
        pagenum: 1, //初始页默认值为1
      },
    
    

    2、具体的请求过程,包含新老数据的数组合并,实现数据实时更新

      getdatalist: function () { //可在onLoad中设置为进入页面默认加载
       var that = this;
        wx.request({
          url: '请求地址',
          data: {
            "key": "某入参value",
            "pageNum": that.data.pagenum, //从数据里获取当前页数
            "pageSize": 10, //每页显示条数
          },
          method: "POST",
          success: function (res) {
            var arr1 = that.data.datalist; //从data获取当前datalist数组
            var arr2 = res.data; //从此次请求返回的数据中获取新数组
            arr1 = arr1.concat(arr2); //合并数组
            that.setData({
              datalist: arr1 //合并后更新datalist
            })
          },
          fail: function (err) { },//请求失败
          complete: function () { }//请求完成后执行的函数
        })
      }
    

    3、翻页时更新页码pagenum+1,并触发新一轮请求,和第2部形成循环。

      onReachBottom: function () { //触底开始下一页
        var that=this;
        var pagenum = that.data.pagenum + 1; //获取当前页数并+1
        that.setData({
          pagenum: pagenum, //更新当前页数
        })
        that.getdatalist();//重新调用请求获取下一页数据
      },
    
    

    4、如果想要实现无感加载,还可以在.json文件中给onReachBottom()设定触发距离,这样不用拉到最底部就开始触发onReachBottom翻页:

    "onReachBottomDistance":300 //可以在当前页也可以全局设置
    

    5、如果在数据的拼接过程中出现了数据拼接弥乱,那么可以通过onLoad()以及下拉刷新onPullDownRefresh()进行配合解决。

    展开全文
  • android 商品列表上拉加载数据下拉刷新数据,直接导入eclipse 可运行,没有访问数据库可根据代码进行修改
  • 主要为大家详细介绍了微信小程序实现列表下拉刷新上拉加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 昨天做了分页功能,原来一直都是没怎么优化过分页,昨天试着写了一下上拉加载,小白文章,有不好的地方请指出。 话不多说,先页面。 效果是这样的简单效果,接下来说一下实现步骤, 1.定义分页时候需要的变量,...
  • uni-app实现上拉加载数据

    千次阅读 2020-01-18 19:14:12
    这里我没有用官方给的方法,哪个放到手机就没有效果,而且再开发阶段的时候,一般也不灵验,所以就自己写了一个,以后可以随时服用 这个getData()和deteleObject(),自己随便定义的 第一步,先在全局定义 var ...
  • <template> <view class="base-box"> <scroll-view scroll-y style="height: 100%;width: 100%;" :refresher-triggered="triggered" :refresher-enabled="true" @refresherrefresh="refreshPage" ...
  • 1、不需要下拉刷新也不需要上拉加载 [self setupEmpty:self.tableView]; [self setupRefresh:self.tableView option:ATRefreshNone]; [self headerRefreshing]; 2、下拉刷新 [self setupEmpty:self....
  • //初始化数据 const [state, setState] = useState({ dataSource, isLoading: true, height: document.documentElement.clientHeight * 3 / 4, }) //给初始化数据 赋值 //根据自己的需求赋值 我这个是从父组件传...
  • 内容:上拉加载的整个Demo工程源码 功能:实现ListView上拉加载,列表页脚提示加载状态
  • 主要介绍了微信小程序实现上拉加载功能,结合实例形式分析了微信小程序加载更多数据、触底加载或点击加载更多数据的相关实现技巧与操作注意事项,需要的朋友可以参考下
  • 主要给大家介绍了关于vue.js整合vux中上拉加载下拉刷新的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
  • 找了很久,网站直接搜不到 = =,生气了 把之前找到的贴一下 1.逻辑 wx.cloud.init() let currentPage = 0 // 当前第几页,0代表第一页 let pageSize = 10 //每页显示多少数据 Page({ data: { dataList: ...
  • 简单的listview上拉加载数据,下拉刷新数据的demo;要是该程序有不足之处,请大家给点意见,大家也可以互相学习
  • 我这边和后端同事沟通的逻辑是上拉一次 (也就是分页一次) pageIndex+1 pageSize 10 条数据不变 onReachBottom() { this.status = 'loading'; this.page = ++ this.page; if(this.cardList.length < this....
  • 数据展示一般分为分页和拉取加载,前者用于pc端,移动端常用于拉取加载数据
  • 判断当前页码*每页条数是否>总页面就可以了
  • 微信小程序的 scroll-view 上拉加载更多的BUG(数据会多加载,甚至有重复数据)。 问题描述:拉一次,会多次触发触底函数 onReachBottom();换成自定义加载更多函数, 例如 loadMore(), 问题依旧存在。 生产环境...
  • H5上拉下拉加载数据,带js模拟数据,适用PC端,H5移动端,与后台数据很好的集成,异步从服务端获取数据展现前台,不好用我直播吃翔
  • data() { return { lawyer: [], loading: false, finished: false, par: { page: 1, // 页数 limit: 4 // 每页的条数 } } }, methods: { layerList(inde) { // 请求... layerList(inde).then(res =&g...
  • 在移动端的web开发中,由于设备的局限性,上拉滚动加载可以带来更好的用户体验,一个列表或者waterfall的lasyload都是基于上拉判断距离后触发事件进行请求加载数据,如何在Vue项目中实现这个功能呢,我们使用了一款...
  • jquery 上拉刷新,下拉加载数据,兼容app

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 86,139
精华内容 34,455
关键字:

上拉加载数据