小程序到底做不做_vue2滚动条加载更大都据完成代

解析：

判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。

scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。

从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。（兼容不同的浏览器）。

代码：

1.vue的实现

html:

 div 
 li v-for="item in questionListData" @click="goDetail(item.id)" 
 {{item.create_time}}
 [{{item.level_value}}]
 {{item.description}}
 {{item.status_value}}
 /li 
 /ul 
 /div 

js:

created () {
 var self = this
 $(window).scroll(function () {
 let scrollTop = $(this).scrollTop()
 let scrollHeight = $(document).height()
 let windowHeight = $(this).height()
 if (scrollTop + windowHeight === scrollHeight) {
 self.questionListData.push({
 'id': '62564AED8A4FA7CCDBFBD0F9A11C97A8',
 'type': '0102',
 'type_value': '数据问题',
 'description': '撒的划分空间撒电话费看见爱上对方见客户速度快解放哈萨克接电话发生的划分空间是的哈副科级哈师大空间划分可接受的后方可抠脚大汉房间卡收到货放假多少',
 'status': '0',
 'status_value': '未解决',
 'level': '0203',
 'level_value': '高',
 'content': '过好几个号',
 'userid': 'lxzx_hdsx',
 'create_time': 00,
 'images': null
 self.questionListData.push({
 'id': 'DE675984D7681BC94F16',
 'type': '0101',
 'type_value': '需求问题',
 'description': 'a阿斯顿发生丰盛的范德萨范德萨发十多个非官方阿道夫葛根粉v跟下载v',
 'status': '0',
 'status_value': '未解决',
 'level': '0203',
 'level_value': '高',
 'content': '秩序性支出V型从v',
 'userid': 'lxzx_hdsx',
 'create_time': 00,
 'images': null
 self.questionListData.push({
 'id': 'B5C61D990F962570C34B8EE607CA1384',
 'type': '0104',
 'type_value': '页面问题',
 'description': '回复的文本框和字体有点丑',
 'status': '0',
 'status_value': '未解决',
 'level': '0203',
 'level_value': '高',
 'content': '回复的文本框和字体有点丑',
 'userid': 'lxzx_hdsx',
 'create_time': 00,
 'images': null
 self.questionListData.push({
 'id': '279F9571CB8DC36F1DEA5C8773F1793C',
 'type': '0103',
 'type_value': '设计问题',
 'description': '设计bug，不应该这样设计。',
 'status': '0',
 'status_value': '未解决',
 'level': '0204',
 'level_value': '非常高',
 'content': '设计bug，不应该这样设计。你看。',
 'userid': 'lxzx_hdsx',
 'create_time': 00,
 'images': null
 self.questionListData.push({
 'id': '80E365710CB9157DB24F08C8D2039473',
 'type': '0102',
 'type_value': '数据问题',
 'description': '数据列表滚动条问题',
 'status': '0',
 'status_value': '未解决',
 'level': '0202',
 'level_value': '中',
 'content': '数据列表在数据条数比较多的情况下无滚动条',
 'userid': 'lxzx_hdsx',
 'create_time': 00,
 'images': null
 console.log(self.questionListData)

因为vue2 实现了m-v双向绑定，所以这里直接改变for循环数据源即可实现列表的数据刷新;

2: 普通js的实现

html：

 div id="content" 
 span测试1 /span 
 span 测试2 /span 
 span 测试3 /span 
 span 测试4 /span 
 span 测试5 /span 
 span 测试6 /span 
 span 测试7 /span 
 span 测试8 /span 
 span 测试9 /span 
 span 测试10 /span 
 span 测试11 /span 
 /li 
 /ul 
 /div 

js：

var html = '' //距下边界长度/单位px
 $(window).scroll(function () {
 var scrollTop = $(this).scrollTop();
 var scrollHeight = $(document).height();
 var windowHeight = $(this).height();
 if (scrollTop + windowHeight == scrollHeight) {
 for(let i=0;i i++){
 html += ' li Page: ' + i + ', Data Index: ' + i + ' /li '
 $('#content ul').append(html);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。