在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
created周期中获取一次数据getData。 loadMore函数根本不执行....
"use strict";
import Vue from 'vue';
import infiniteScroll from 'vue-infinite-scroll';
Vue.use(infiniteScroll);
import router from './router/page.js';
import states from './state/state.js';
window.bus =
import Page from './page.vue';
//render page
const root = new Vue({
}).$mount('#root');
brandlists.vue
&template&
&div class="up-page page-brandlists" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"&
&BrandListsItem
v-for="item in brand_lists"
:brandItem="item"
:brandInfos="brand_infos"
&/template&
&style lang="less" scoped&
.page-brandlists{
// height: 560
&script type="text/babel"&
import ajax from '../service/service.js';
import BrandListsItem from '../component/brandlists_item.vue';
export default{
msg: 'hello vue',
brand_lists: [{
shopNo: "shopNO",
shopImage: "",
shopNm: "shopNm",
shopRate: 0,
busiTime: "9-12",
betweenDis: 9999,
shopAddr: 'shopAddr',
shopContactPhone: "1212431",
shopLnt: "31",
shopLat: "121"
brand_infos: {},
busy: false
props: {},
methods: {
getData(){
let _this =
this.busy =
console.log('loading... ' + new Date());
ajax.post({
url: "brandNo" ? "shop/getshopByBrand" : "shop/getShopByCoupon",
userLnt: "121.662709",
userLat: "31.23415",
brandNo: "BRND0dcc365c4f41a",
//品牌编号
couponNo: "",
//优惠编号
pageIndex: 0
callback: function (data, code) {
if (100 == code) {
console.log(JSON.stringify(data.body))
let _infos = data.body.result.
_this.brand_lists.push(_infos.shopInfs[0]);
_this.brand_lists.push(_infos.shopInfs[0]);
_this.brand_lists.push(_infos.shopInfs[0]);
_this.brand_lists.push(_infos.shopInfs[0]);
_this.brand_lists.push(_infos.shopInfs[0]);
_this.brand_lists.push(_infos.shopInfs[0]);
_this.brand_lists.push(_infos.shopInfs[0]);
_this.brand_infos = _infos.brandI
let _infos = _this.brand_lists[0];
_this.brand_lists.push(_infos);
console.log('end... ' + new Date());
this.busy =
loadMore(){
console.log(1);
if (!this.busy) {
this.getData();
created(){
if (!this.busy) {
this.getData();
mounted(){
// myScroll = new IScroll("#brandlists", {
scrollbars: true,
click: true
components: {
BrandListsItem
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我也遇到这个问题，确实是没有设置高度，把高度设为100%就好了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
请问您这个问题解决了吗？我也遇到了这个问题毫无头绪。
该答案已被忽略，原因：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
刚试了下这个无限滚动组件，你这边的问题是没有设置.page-brandlists元素的高度。另外的话，不触发loadMore事件是因为，scrollView内部的元素还没有撑破scrollView，也就是没有达到你的infinite-scroll-distance="10"的这个条件。
该答案已被忽略，原因：
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：下次自动登录
现在的位置:
& 综合 & 正文
【无限滚动加载数据】—infinite-scroll插件的使用
网上对于infinite-scroll插件使用的例子不多。但由于它的出现，鼓吹了瀑布流形式的页面展示方式，所以不得不了解了解这种新的分页方式。
上有对infinite-scroll的详细描述，但一般人即使看未必看得懂，看得懂未必就调试成功。所以借今晚有点时间，把跑通的例子供大家借鉴。
一.无限滚动概念
首先，它是基于Jquery的，另外还要明白无限滚动的概念：无限滚动的实现原理就是当你在网页上的滚动条滚动到离网页底部一定长度的时候，触发某ajax函数（infinite-scroll内已经封装好）,往后台加载文件或者数据，又或者从外部引入静态html形式文件。
二.探讨infinite-scroll
1.从网页头引入两个js文件，注意必须先放jquery的
[javascript]
&script src="css/infinite-scroll/jquery-1.6.4.js"&&/script&
&script src="css/infinite-scroll/jquery.infinitescroll.js"&&/script&
2.之后在网页头自己写一个js脚本
[javascript]
$(document).ready(function (){
$("#container").infinitescroll({
navSelector: "#navigation",
nextSelector: "#navigation a",
itemSelector: ".scroll " ,
animate: true,
maxPage: 3,
3.或许你看到这里还是不太清楚网页怎么定义，这里给出我的demo，希望可以有帮助
%@ page language="java" contentType="text/ charset=utf-8"
pageEncoding="utf-8"%
&!DOCTYPE html
charset="utf-8"
无限翻页效果
src="css/infinite-scroll/jquery-1.6.4.js"
src="css/infinite-scroll/jquery.infinitescroll.js"
src="css/infinite-scroll/test/debug.js"
$(document).ready(function (){
//别忘了加这句，除非你没学Jquery
$("#container").infinitescroll({
navSelector: "#navigation",
//页面分页元素--成功后自动隐藏
nextSelector: "#navigation a",
itemSelector: ".scroll " ,
animate: true,
maxPage: 3,
id="container"
class="scroll"
第一页内容第一页内容
第一页内容第一页内容第一页内容
第一页内容第一页内容第一页内容
第一页内容第一页内容第一页内容
id="navigation" align="center"
href="user/list?page=1"
三.细微部分
1.js函数里还可定义的其他属性:
[javascript]
loadingImg
: "/img/loading.gif",
loadingText
: "Loading new posts...",
extraScrollPx: 50,
: "I think we've hit the end, Jim" ,
errorCallback: function(){},
其他属性暂不作过多介绍
2.数据的载入方式
：如果你已经有固定的数据块，可以放到html里面加载静态页面。
：可以用后台返回json的方式，返回的时候要指定temple里面的html模版，否则会出错。
③我上面例子用的其实也是json，前台在Action层把数据取出后再用StringBuilder拼装成html格式的字符串返回前台。（个人习惯）
3.数据分页方式
本例用hibernate进行数据分页。
以上内容仅作参考，时间问题暂且收笔。
这里给出一个下载，不是这个例子但是原理是一样的，希望有帮助。
&&&&推荐文章:
【上篇】【下篇】问题：(javascript)vue 用iscroll实现下拉加载失败？有可用的vuejs实现下拉的库吗？
描述:尝试用iscroll实现，结果失败，代码如下&template&
&div v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10"
&p v-for="result in results"&{{result}}&/p&
&/template&
require('vue-infinite-scroll');
require('iscroll');
module.exports = {
data:function () {
results : [],
busy:false
ready: function () {
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
loadMore: function () {
this.busy =
var self =
fetch('/server.php')
.then(function(response) {
return response.json()
}).then(function(json) {
self.results = self.results.concat(json);
}).catch(function(ex) {
console.log(ex);
this.busy =
loaded: function () {
myScroll = new IScroll('#wrapper', { mouseWheel: true });
解决方案1:没见过div里加/p>把loaded()丢到ready里正常可以用的插件, 在vue中也都可以用, 至少我还遇到不能用的.
以上介绍了“(javascript)vue 用iscroll实现下拉加载失败？有可用的vuejs实现下拉的库吗？”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：/itwd/1013275.html
上一篇： 下一篇：在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
标签：至少1个，最多5个
在vue中实现下拉加载数据，瀑布流
节约流量提高用户体验
不至于每次把所有数据加载出来，出现用户等待时间较长
当用户打开首页的时候显示8条数据，当用户滚动到屏幕可视区边缘的时候，然后触发一个函数，请求一个api加载新的数据，并且填充到之前的数据下面。
vue-infinite-scroll
npm i vue-infinite-scroll -D
在main.js入口文件里面引入
使用CommonJS方式
// 注册全局
var infiniteScroll =
require('vue-infinite-scroll');
Vue.use(infiniteScroll)
//单独的组件里面使用
var infiniteScroll = require('vue-infinite-scroll');
directives: {infiniteScroll}
使用 ES2015的方式
// 注册全局
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
//单独的组件里面使用
import infiniteScroll from 'vue-infinite-scroll'
directives: {infiniteScroll}
Use v-infinite-scroll to enable the infinite scroll, and use infinite-scroll-* attributes to define its options.使用v-infinite-scroll启用无限滚动，并使用无限滚动- *属性来定义它的选项。
The method appointed as the value of v-infinite-scroll will be executed when the bottom of the element reaches the bottom of the viewport.
当元素底部到达viewport底部时，将触发v-infinite-scroll值的方法。
&div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"&
var count = 0;
el: '#app',
busy: false
methods: {
loadMore: function() {
this.busy =
setTimeout(() =& {
for (var i = 0, j = 10; i & i++) {
this.data.push({ name: count++ });
this.busy =
infinite-scroll-disabled
如果该属性的值为true，则将禁用无限滚动。
infinite-scroll-distance
数字(默认值= 0)——在执行v -infinite- scroll方法之前，元素底部和viewport底部之间的最小距离。
infinite-scroll-immediate-check
布尔值(默认值= true)表示该指令应该在绑定后立即检查。如果可能，内容不够高，不足以填满可滚动的容器。
infinite-scroll-listen-for-event
当事件在Vue实例中发出时，无限滚动将再次检查。
infinite-scroll-throttle-delay
下次检查和这次检查之间的间隔(默认值= 200)
后端实现：
需求分析：
接收参数：
每页有多少条 prePage第几页(当前页) page当我们第一次加载数据的时候加载8条区分第一次和不是第一次加载
&div class="accessory-list-wrap"&
&div class="accessory-list col-4"&
&li v-for="(item,index) in goods" :key="index"&
&div class="pic"&
&a href="#"&&img v-lazy="'/static/img/' + item.productImage" alt=""&&/a&
&div class="main"&
&div class="name"&{{item.productName}}&/div&
&div class="price"&{{item.salePrice}}&/div&
&div class="btn-area"&
&a href="javascript:;" class="btn btn--m"&加入购物车&/a&
&div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"&
vue 组件里面：
busy: true,
pageSize:8,
},methods:{
getGoodsList(flag){
let sort = this.sortFlag ? 1 : -1;
let param = {
sort:sort,
priceLevel:this.priceChecked,
page:this.page,
pageSize:this.pageSize
axios.get('/goods/list',{params:param}).then(res=&{
// 多次加载数据
this.goods = this.goods.concat(res.data.result);
if(res.data.result.length == 0){
this.busy =
this.busy =
// 第一次加载数据
this.goods = res.data.
// 当第一次加载数据完之后，把这个滚动到底部的函数触发打开
this.busy =
loadMore: function() {
this.busy =
// 多次加载数据
setTimeout(() =& {
this.page ++;
this.getGoodsList(true);
let currentPage = parseInt(req.param('page')) & 0 ? parseInt(req.param('page')) : 1;
let pageSize = parseInt(req.param('pageSize')) & 0 ? parseInt(req.param('pageSize')) : 8;
// 要跳过多少条
let skip = (currentPage - 1) * pageS
let goodsModel = Goods.find(param);
goodsModel.sort({ 'salePrice': sort }).skip(skip).limit(pageSize);
goodsModel.exec({}, function(err, doc) {
if (err) {
res.json({ status: "1", msg: err.message })
res.json({ status: '0', msg: '', result: doc })
后续会优化
1 收藏&&|&&21
你可能感兴趣的文章
19 收藏，2.4k
2 收藏，34
10 收藏，3.4k
分享到微博？
我要该，理由是：masonry&&infinitescroll&&无刷新瀑布流&jquery设置&&开始加载
masonry和infinitescroll实现无刷新无分页完美瀑布流&&
infinite-scroll-jquery
参数详解：
$('#content').infinitescroll({
& navSelector& :
"div.navigation", //导航的选择器，会被隐藏
& nextSelector : "div.navigation
a:first",//包含下一页链接的选择器
& itemSelector : "#content
div.post",//你将要取回的选项(内容块)
debug&&&&&&&
: true, //启用调试信息
& loadingImg&& :
"/img/loading.gif", //加载的时候显示的图片
&&&&&&&&&&&&&&&&
//默认采用：""
animate&&&&&
: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
& extraScrollPx: 50,
//滚动条距离底部多少像素的时候开始加载，默认150
bufferPx&&&&
: 40,//载入信息的显示时间，时间越大，载入信息显示时间越短
& errorCallback:
function(){},//当出错的时候，比如404页面的时候执行的函数
localMode&&& :
true //是否允许载入具有相同函数的页面，默认为false
& },function(arrayOfNewElems){
& //程序执行完的回调函数
&取消绑定事件的函数写法：$(window).unbind(‘.infscr’);
通过事件触发加载数据的写法：
$(document).trigger(‘retrieve.infscr’);
//比如加到某个click事件中
此插件还有一个鲜为人知的功能就是可以载入任何页面的选择器中的内容，可以是id以及是class，并转化到html存储。要比jquery自带的的load强大多了。
$('').load('/page/2/ #content
div.post',function(){&&&&&
$(this).appendTo('#content');& });
官方首页及下载地址:
参数详解：
$(function(){
&$(?#container?).masonry({
&// options 设置选项
&itemSelector : ?.item?, //子类元素选择器
&columnWidth : 240 ,//一列的宽度 ，包括边距 220+10+10
&isAnimated:true, //使用jquery的布局变化，是否启用动画效果
&animationOptions:{
&//jquery animate属性 ，动画效果选项。比如渐变效果 Object { queue: false, duration: 500 }
&gutterWidth:0,//列的间隙
&isFitWidth:true,//自适应宽度
&isResizableL:true,// 是否可调整大小
&isRTL:false,//使用从右到左的布局
官方首页及下载地址：
演示代码：
KISSY.Waterfall&实现思路KISSY&的&Waterfall&组件主要包含两个部分，一个是对现有数据块进行排列计算各自所在的位置；&二是下拉滚动时，触发加载数据操作，并把数据添加到目标容器中。1)&数据块排列，算法步骤简述下:
·&初始化时，对容器中已有数据块元素进行第一次计算，需要用户给定:&a，容器元素&—&以此获取容器总宽度；&b，列宽度；&c，最小列数；&最终列数取的是容器宽度/列宽度和最小列数的最大值，这样保证了，当窗口很小时，仍然出现最小列数的数据；
·&获得列数后，需要保存每个列的当前高度，这样在添加每个数据块时，才知道起始高度是多少；
·&依次取容器中的所有数据块，先寻找当前高度最小的某列，之后根据列序号，确定数据块的left，top值，left&为所在列的序号乘以列宽，top&为所在列的当前高度，最后更新所在列的当前高度加上这个数据块元素的高度，至此，插入一个元素结束；
·&当所有元素插入完毕后，调整容器的高度为各列最大的高度值，结束依次调整；
·&性能效率上的注意点:&a，如果当前正在调整中，又触发了&resize&事件，需要将上次调整暂停后执行这次调整(见&timedChunk&函数)；&b，resize&触发会很频繁，可以将回调函数缓存一段时候后执行，即当这段时间内多次触发了resize事件，但回调函数只会执行一次(见&S.buffer&函数)
·&感兴趣的可以参见源码。
2)&异步加载数据，前面讲的是如何对容器中已有元素进行排列，但很多情况下，还需要不断加载新数据块，为此专门设计了一个独立的模块&KISSY.Waterfall.Loader，其实这个功能就更简单了，仅包含两个步骤:
·&绑定滚动事件，并确定预加载线高度值，即滚动到哪个高度后，需要去加载数据，其实这个就是列的最小高度值，这样当前滚动值和最小高度值比较一下即可判断出来，是否要触发加载数据；
·&加载数据，为了不对数据源做太多限制，完全由使用者自己决定数据源从哪边获取和其格式，这样更好的方便用户使用。为此，该组件只提供一个load(success，end)&接口，怎样load&由用户自己去定义，而其中的&success/end，分别给出如何添加新数据(suceess&即同&addItems)/如何停止加载的接口。这样真是太方便了~~
·&感兴趣的可以参见源码。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。