精华内容
下载资源
问答
  • 下拉加载更多

    2020-07-21 15:37:42
    } window.onscroll = function() { if(moreData){ if (getScrollTop() + getClientHeight() >= getScrollHeight()) { _text.innerText = '加载中...'; // throttle(fetchData); $.ajax({ type...
    <script type="text/javascript">
    (function(window) {
    	var i = 2;
    	var moreData=true;
    	// 获取当前滚动条的位置 
        function getScrollTop() { 
    	    var scrollTop = 0; 
    	    if (document.documentElement && document.documentElement.scrollTop) { 
    	    	scrollTop = document.documentElement.scrollTop; 
    	    } else if (document.body) { 
    	    	scrollTop = document.body.scrollTop; 
    	    } 
    	    return scrollTop; 
        } 
        // 获取当前可视范围的高度 
        function getClientHeight() { 
    	    var clientHeight = 0; 
    	    if (document.body.clientHeight && document.documentElement.clientHeight) { 
    	    	clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); 
    	    } 
    	    else { 
    	    	clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 
    	    } 
    	    return clientHeight; 
        }
        // 获取文档完整的高度 
        function getScrollHeight() { 
        	return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
        }
        var _text = document.querySelector('.refreshText'),
        _container = document.getElementById('refreshContainer');
        var throttle = function(method, context){
    		  clearTimeout(method.tId);
    		  method.tId = setTimeout(function(){
    		    method.call(context);
    		  }, 300);
    	}
        function fetchData() {
        	setTimeout(function() {
        		_container.insertAdjacentHTML('beforeend', '<li>new add...</li>');
        	}, 1000);
        }
        window.onscroll = function() {
        	if(moreData){
    			if (getScrollTop() + getClientHeight() >= getScrollHeight()) {
    				_text.innerText = '加载中...';
    				// throttle(fetchData);
    				$.ajax({
    					type: 'POST',
    					// dataType: 'JSON',
    					url: '${path}/', //服务路径
    					data: {
    						page:i
    					},
    					success: function (res) {
    						console.log("res---" + JSON.stringify(res))
    						if (res == "") {
    							console.log("data is null");
    							_text.innerText = '';
    							moreData = false;
    						} else {
    							_container.insertAdjacentHTML('beforeend', res);
    							i++;
    						}
    					},
    					error: function () {
    						$(this).removeAttr("disabled");
    						alert("换卡异常失败!");
    					}
    				});
    
    			}
    		}
        };
    })(window);
    </script>
    

    有时候 会出现放10条数据下拉无响应的情况,因为10条数据没有把页面铺满.触底事件无法执行.可让一页显示20条数据

    展开全文
  • 移动端下拉刷新 下拉加载更多, 移动端下拉刷新 下拉加载更多
  • 移动端下拉加载更多

    2015-08-17 16:20:02
    移动端下拉加载更多
  • listview下拉加载更多

    2015-10-10 16:26:53
    简单的实现listview下拉加载更多,不需要自定义listview同样可以实现listview加载更多的功能
  • 关闭下拉加载更多bug

    2021-01-10 22:49:31
    <div><p>关闭下拉加载更多bug 在关闭了下拉加载更多之后,实际还是会触发加载加多,这里的关闭加载更多似乎只是没有显示加载更多的动画</p><p>该提问来源于开源项目:bingoogolapple/...
  • 基于jQuery手机端下拉加载更多信息实例
  • zepto.js触屏手机下拉加载更多代码 zepto.js触屏手机下拉加载更多代码
  • <div><p>关于下拉加载更多效果 我指的是,下拉加载更多,我们手动向上拉的时候,是没效果的,还以为不可以下拉加载,只有等松开的时候,才有转圈,体验不是很好。可否...
  • 移动端 web 下拉加载 更多 效果源码
  • vue.js的双向移动端下拉加载更多组件
  • HTML5+JS 手机下拉加载更多数据,分为iscroll4 iscroll5和原生JS写的三种
  • 任何一个库在网上都褒贬不一,uni-app同样如此,对于不是太熟悉前端开发的人员来说使用这样一个库能让我们的开发...其实关于加载更多这个插件,官方已经为我们提供了,放在扩展组件中,当然这个组件只是为我们实现...

    任何一个库在网上都褒贬不一,uni-app同样如此,对于不是太熟悉前端开发的人员来说使用这样一个库能让我们的开发效率提高不少,如果你想一套代码,发布到多个平台,那么uni-app也是一个很不错的选择。

    如果你想了解更多关于uni-app的知识请自行官网查看,我这里今天只记录下一个关于上拉刷新和下拉加载的小功能。

    其实关于加载更多这个插件,官方已经为我们提供了,放在扩展组件中,当然这个组件只是为我们实现了上拉加载的按钮显示样式,具体的获取数据逻辑还是需要我们自己去编写。

    效果预览

    转的图片有点大,没工夫找工具了。

    分析数据结构

    我们获取数据的逻辑是要根据目标接口返给我们的的数据结构来编写的,我们先来看下目标返回的大概结构。

    我们放收尾和中间任意一页的数据结构给大家看。

    第一页1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27{

    "next": "http://127.0.0.1:8000/api/v1/lecture/?page=bz0z&size=3",

    "previous": null,

    "results": [

    {

    "id": 80,

    "name": "完成能够阅读.",

    "start_time": "2020-09-27T16:35:46",

    "address": "江西省海口县上街贵阳街v座 930357",

    "thumbnail": "https://www.lorempixel.com/750/450",

    },

    {

    "id": 79,

    "name": "规定更多系列密码其实.",

    "start_time": "2020-09-27T02:33:48",

    "address": "甘肃省秀英县合川周街a座 342016",

    "thumbnail": "https://placekitten.com/750/450",

    },

    {

    "id": 78,

    "name": "能够应该首页免费.",

    "start_time": "2020-10-22T21:02:58",

    "address": "山东省洋县南湖吴街g座 247551",

    "thumbnail": "https://dummyimage.com/750x450",

    }

    ]

    }

    第二页1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27{

    "next": "http://127.0.0.1:8000/api/v1/lecture/?page=bz02&size=3",

    "previous": "http://127.0.0.1:8000/api/v1/lecture/?page=cj0xJnA9MTAw&size=3",

    "results": [

    {

    "id": 77,

    "name": "价格觉得项目有限作品帮助.",

    "start_time": "2020-09-19T05:14:11",

    "address": "河北省莹县平山侯路H座 848604",

    "thumbnail": "https://placekitten.com/750/450",

    },

    {

    "id": 76,

    "name": "这是他的因此因此.",

    "start_time": "2020-10-13T02:20:59",

    "address": "贵州省西安市淄川马路b座 421301",

    "thumbnail": "https://www.lorempixel.com/750/450",

    },

    {

    "id": 74,

    "name": "其实一点发表科技事情.",

    "start_time": "2020-10-25T20:03:47",

    "address": "四川省凤英市门头沟张街B座 755654",

    "thumbnail": "https://dummyimage.com/750x450",

    }

    ]

    }

    最后一页1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27{

    "next": null,

    "previous": "http://127.0.0.1:8000/api/v1/lecture/?page=bz0zJnI9MQ%3D%3D&size=3",

    "results": [

    {

    "id": 4,

    "name": "精华业务进入.",

    "start_time": "2020-11-03T01:30:23",

    "address": "云南省春梅市沙市银川路Y座 310692",

    "thumbnail": "https://www.lorempixel.com/750/450",

    },

    {

    "id": 3,

    "name": "还有那么注意精华.",

    "start_time": "2020-09-26T22:04:27",

    "address": "新疆维吾尔自治区兰州县高坪王街v座 401585",

    "thumbnail": "https://dummyimage.com/750x450",

    },

    {

    "id": 2,

    "name": "技术服务如此本站软件不要.",

    "start_time": "2020-09-28T12:23:53",

    "address": "北京市梅县城北成都路B座 221544",

    "thumbnail": "https://placekitten.com/750/450",

    }

    ]

    }

    我这里要说明下,为了代码不那么长我们这里都是每页3条来显示的,实际项目中肯定每页不止3条。另外分析接口返回数据可以得知,页码是加密的,我们不知道下一页的页码是什么(接口服务用的django,其第三方包DjangoRestFramework中分页自带有这个功能),其他可以看出来的就是最后一页的next页为null,利用这点我觉得我们可以就依据这个下一页字段,没有下一页字段代表数据读取完了。

    获取数据逻辑

    初始化

    默认进去该页面肯定会默认显示几条数据。我们可以在onload里直接编写一下代码:1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13uni.request({

    url: "你的接口地址",

    success: (res) => {

    if (res.statusCode == 200) {

    this.list = res.data.results

    } else {

    console.log("出错了,联系管理员吧")

    }

    },

    fail: (err) => {

    console.log("出错了,联系管理员吧")

    }

    })

    生命周期

    在uni-app页面生命周期中有一个onReachBottom,它就是负责页面上拉触底事件的处理函数。我们将刚才写的request请求写到一个方法中,方法名为get_list(),生命周期onReachBottom中如下书写:1

    2

    3onReachBottom() {

    this.get_list()

    },

    优化获取数据逻辑

    我们当然可以在上拉加载更多时重写写一个请求方法,但是为了代码复用,我们最好是在原来请求代码的数据上进行修改,毕竟待会儿下拉刷新页面的时候也要重新发起请求。

    简单分析下流程:下拉页面请求新数据-》将新数据追加到老数据后面-》直到所有数据全部请求完。

    在分析数据结构中我们可以得出没有下一页了即代码数据全部请求完了,我们来定义一个参数来存放下一页链接。

    初步尝试1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'

    export default {

    data() {

    components: {

    uniLoadMore

    }

    return {

    // 存放列表数据

    list: [],

    // 下拉状态

    status: 'more',

    contentText: {

    contentdown: '上拉加载更多',

    contentrefresh: '加载中',

    contentnomore: '没有更多'

    },

    // 下一页链接

    next_url: ''

    }

    },

    onReachBottom() {

    this.get_lecture()

    },

    onLoad() {

    // 初始获取数据

    this.get_list()

    },

    methods: {

    get_list: function(){

    // 初始默认获取数据链接

    var url = `目标接口地址`

    // 如果下一页链接存在则代表上拉加载时获取数据的链接url

    if (this.next_url) {

    url = this.next_url

    }

    // 请求数据

    uni.request({

    url: url,

    success: (res) => {

    if (res.statusCode == 200) {

    // 当前以后数据连接新获取的数据

    this.list = this.list.concat(res.data.results)

    // 页面返回的下一页链接赋值给next_url

    this.next_url = res.data.next

    } else {

    console.log("出错了,联系管理员吧")

    }

    },

    fail: (err) => {

    console.log("出错了,联系管理员吧")

    }

    })

    },

    }

    }

    如果你看了代码不知道有没有发现其中的bug,我是没有发现,我是在预览页面时才发现了有问题的。

    这个bug就是当你获取完所有的数据之后,又开始从第一篇文章开始获取了,因为所有页面获取完之后next_url的值为null了,所以又重新获取初始数据,所以我们要区分是第一次进来的还是数据加载完了。

    我这里用了一个最Low的办法,初始的时候直接将next_url设为false了;正常该值为string的url链接;访问完所有数据next_url为null。区分下这三种状态就可以了。

    代码优化1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    67

    68

    69

    70

    import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'

    export default {

    data() {

    components: {

    uniLoadMore

    }

    return {

    list: [],

    // 下拉状态

    status: 'more',

    contentText: {

    contentdown: '上拉加载更多',

    contentrefresh: '加载中',

    contentnomore: '没有更多'

    },

    // 下一页链接

    next_url: false

    }

    },

    onReachBottom() {

    this.satus = "more"

    this.get_list()

    },

    onLoad() {

    // 初始获取数据

    this.get_list()

    },

    methods: {

    // 获取热点资讯

    get_list: function(){

    // 初始默认获取数据链接

    var url = `初始目标接口地址`

    // 判断如果下一页链接为false代表第一次访问数据;如果为null代表已加载完所有数据了;否则可以加载更多数据。

    if (this.next_url == false) {

    // 首次访问,默认访问首页链接

    url = `初始目标接口地址`

    } else if (this.next_url == null) {

    // 代表加载完所有数据,即没有更多数据了

    url = null

    // 显示没有更多文本

    this.status = "noMore"

    // 直接返回,不往下执行

    return false

    } else {

    // 代表已有数据,且还可以加载更多数据

    url = this.next_url

    }

    uni.request({

    url: url,

    success: (res) => {

    if (res.statusCode == 200) {

    // 当前以后数据连接新获取的数据

    this.list = this.list.concat(res.data.results)

    // 页面返回的下一页链接赋值给next_url

    this.next_url = res.data.next

    } else {

    console.log("出错了,联系管理员吧")

    }

    },

    fail: (err) => {

    console.log("出错了,联系管理员吧")

    }

    })

    },

    }

    }

    下拉刷新

    相对于上拉加载更多,那么下拉刷新就简单的多了,无非是清空原有代码,初始化原始next_url为false,后面就跟第一次访问一样了,但是这其中包含两个要注意的点:要使用下拉刷新需要在page页对应该页面的style属性中开启enablePullDownRefresh

    即:1

    2

    3

    4

    5

    6{

    "path" : "页面链接",

    "style" : {

    "enablePullDownRefresh" : true

    }

    }

    下拉刷新的时候有个旋转的动画,下拉之后它一直在旋转,我们需要在请求完成后手动结束这个动画

    结束的方法为:uni.stopPullDownRefresh()

    下拉刷新代码很简单,同样存在在页面生命周期中1

    2

    3

    4

    5

    6

    7

    8

    9

    10onPullDownRefresh() {

    // 下拉刷新

    // 清空数据

    this.list = []

    // 下一页链接置为false,代表第一次获取数据

    this.next_url = false

    // 开始获取数据

    this.get_list()

    },

    全部代码1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    67

    68

    69

    70

    71

    72

    73

    74

    75

    76

    77

    78

    79

    80

    81

    82

    83

    84

    85

    86

    87

    88

    89

    90

    91

    92

    93

    94

    95

    96

    97

    98

    99

    100

    101

    102

    103

    104

    105

    106

    107

    108

    109

    110

    111

    112

    113

    114

    115

    116

    117

    118

    119

    120

    121

    122

    123

    124

    125

    126

    127

    128

    129

    130

    131

    132

    133

    134

    135

    136

    137

    138

    139

    140

    141

    142

    {{item.id}}{{item.name}}

    {{item.address}}

    {{item.start_time}}

    import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'

    export default {

    data() {

    components: {

    uniLoadMore

    }

    return {

    list: [],

    // 下拉状态

    status: 'more',

    contentText: {

    contentdown: '上拉加载更多',

    contentrefresh: '加载中',

    contentnomore: '没有更多'

    },

    // 下一页链接

    next_url: false

    }

    },

    onPullDownRefresh() {

    // 下拉刷新

    // 清空数据

    this.list = []

    // 下一页链接置为false,代表第一次获取数据

    this.next_url = false

    // 开始获取数据

    this.get_list()

    },

    onReachBottom() {

    // 获取更多数据,

    this.status = 'more';

    this.get_list()

    },

    onLoad() {

    // 初始获取数据

    this.get_list()

    },

    methods: {

    // 获取热点资讯

    get_list: function(){

    // 请求提交的参数

    var data = {}

    // 初始默认获取数据链接

    var url = `默认接口地址`

    // 判断如果下一页链接为false代表第一次访问数据;如果为null代表已加载完所有数据了;否则可以加载更多数据。

    if (this.next_url == false) {

    // 首次访问,默认访问首页链接

    url = `默认接口地址`

    } else if (this.next_url == null) {

    // 代表加载完所有数据,即没有更多数据了

    url = null

    // 显示没有更多文本

    this.status = "noMore"

    // 直接返回,不往下执行

    return false

    } else {

    // 代表已有数据,且还可以加载更多数据

    url = this.next_url

    }

    uni.request({

    url: url,

    success: (res) => {

    if (res.statusCode == 200) {

    // 当前以后数据连接新获取的数据

    this.list = this.list.concat(res.data.results)

    // 页面返回的下一页链接赋值给next_url

    this.next_url = res.data.next

    // 停止当前页面下拉刷新动画

    uni.stopPullDownRefresh()

    } else {

    uni.showModal({

    showCancel: false,

    content: "出错了,联系管理员吧"

    })

    }

    },

    fail: (err) => {

    console.log(err)

    uni.showModal({

    showCancel: false,

    content: "出错了,联系管理员吧"

    })

    }

    })

    },

    }

    }

    .lecture_text {

    overflow: hidden;

    }

    .lecture_img {

    width: 100%;

    }

    .lecture_title {

    white-space: nowrap;

    text-overflow: ellipsis;

    padding-bottom: 10px;

    }

    .lecture_location,

    .lecture_date {

    line-height: 20px;

    font-size: 12px;

    color: #AAAAAA;

    }

    展开全文
  • 主要介绍了jQuery+AJAX实现无刷新下拉加载更多的相关资料,需要的朋友可以参考下
  • 史上最好用的上拉刷新下拉加载更多框架!简单方便松松的.....
  • mint 下拉加载更多

    2019-05-20 14:16:16
    @mint 下拉加载更多 export default { name: ‘Loadmore’, data() { return { examplename: ‘Loadmore’, pageNum: 1,//页码 InitialLoading: true,//初始加载 allLoaded: false,//数据是否加载完毕 bottomStatus...

    @mint 下拉加载更多
    在这里插入图片描述

    export default {
    name: ‘Loadmore’,
    data() {
    return {
    examplename: ‘Loadmore’,
    pageNum: 1,//页码
    InitialLoading: true,//初始加载
    allLoaded: false,//数据是否加载完毕
    bottomStatus: ‘’,//底部上拉加载状态
    wrapperHeight: 0,//容器高度
    topStatus: ‘’,//顶部下拉加载状态
    topText: ‘’,
    cars:[],
    bottomText: ‘’,
    bottomPullText: ‘上拉刷新’,
    bottomDropText: ‘释放更新’,
    bottomLoadingText: ‘加载中…’,

            }
        },
        mounted() {
            let windowWidth = document.documentElement.clientWidth;//获取屏幕宽度
            if (windowWidth >= 768) {//这里根据自己的实际情况设置容器的高度
                this.wrapperHeight = document.documentElement.clientHeight - 105;
            } else {
                this.wrapperHeight = document.documentElement.clientHeight - 80;
            }
    		this.getstorge()
    		
    
        methods: {
            handleBottomChange(status) {
                this.bottomStatus = status;
            },
    		getstorge(){
    			let _this = this
    			this.$axios.get('http://shengqng.natapp1.cc/apic/v1/sjlist?id=2',{
                    params:{
                        page:this.pageNum,
    					}
                    }).then((response)=>{
    			this.$nextTick(() => {
    				 _this.cars=_this.cars.concat(response.data.data);//多个数组返回新数组
    
    			})
    			 
    			   console.log(response.data.data);
    			}).catch((response)=>{
    			  // console.log(response);
    		})
    		},
    
            loadBottom() {
    			
    			let _this = this
    			// this.$refs.loadmore.onBottomLoaded(id);
                this.handleBottomChange("loading");//上拉时 改变状态码
    			// this.getstorge()
                this.pageNum += 1;
                // setTimeout(() => {//上拉加载更多 模拟数据请求这里为了方便使用一次性定时器
                    if (this.pageNum <= 3) {//最多下拉三次
    				// _this.cars.length +=10
    				this.getstorge()
    				console.log(_this.cars)
                        
                    } else {
                        this.allLoaded = true;//模拟数据加载完毕 禁用上拉加载
                    }
                    this.handleBottomChange("loadingEnd");//数据加载完毕 修改状态码
                    
                // }, 1500);
    			this.$refs.loadmore.onBottomLoaded();
            },
            handleTopChange(status) {
    			// console.log(status)
                this.topStatus = status;
            },
    
        },
    	watch: {
    
     bottomStatus(val) {
         switch (val) {
              case 'pull':
                  this.bottomText = this.bottomPullText;
                  break;
              case 'drop':
                  this.bottomText = this.bottomDropText;
                  break;
              case 'loading':
                  this.bottomText = this.bottomLoadingText;
                  break;
          }
     }
    

    },

    }

    .page-loadmore-wrapper {
    overflow: scroll;
    z-index: 100;
    }

    .hot-list {
        padding: 0 8px;
    }
    
    .hot-item {
        padding: 10px 0;
    }
    
    .hot-one {
        overflow: hidden;
        border-bottom: 1px dashed #ccc;
    }
    
    .hot-one a img {
        padding-right: 10px;
    }
    
    .hot-item a img {
        width: 135px;
        height: 90px;
    }
    
    .fl {
        float: left;
    }
    
    .hot-one a h5 {
        margin-top: 2px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin-bottom: 6px;
        font-size: 16px;
        color: #000;
    }
    
    .hot-one a p {
        font-size: 12px;
        color: #828282;
        margin: 0 0 3px;
    }
    
    .color_e85647 {
        color: #e85647;
    }
    
    div.hot-list > div:first-child .img-box {
        overflow: hidden;
    }
    
    div.hot-list > div:first-child img {
        width: 100%;
        height: auto;
        padding-right: 0;
    }
    
    展开全文
  • android listview demo 下拉加载更多 已调试通过。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,418
精华内容 1,767
关键字:

下拉加载更多