精华内容
下载资源
问答
  • uniapp触底加载

    2021-05-18 14:09:42
    uniapp触底加载 首先在packjson中编辑你需要该功能的页面下的style 在style中有一个参数为"enablePullDownRefresh",让参数值为true "enablePullDownRefresh": true 在页面中 直接使用,与生命周期函数 同级别 ...

    uniapp触底加载

    首先在packjson中编辑你需要该功能的页面下的style
    在style中有一个参数为"enablePullDownRefresh",让参数值为true

    "enablePullDownRefresh": true
    

    在页面中 直接使用,与生命周期函数 同级别

    onLoad(){
    
    },
    onReachBottom(){
        // 触底的时候请求数据,即为上拉加载更多
        var allTotal = this.page * this.pageSize
        //this.page为加载次数,this.pageSize为每一次加载的数据条数
        if(allTotal < this.totalElements){
        //this.totalElements为请求数据的总条数。只要现有条数小于总条数就就执行一下代码
            this.allListItem = false;    
            this.page ++;    
            //加载次数递加
             this.GetMoreCdcAccountList(this.usertoken); //请求更多数据列表
        }else{
            this.allListItem = true;
            console.log('已加载全部数据')
        }
    },
    methods:{
        GetMoreCdcAccountList(){
            console.log('请求更多数据')
           //此处发送请求
           uni.request({
           url:‘’
    		}}
    }
    
    展开全文
  • <template> <view class="order"> <view class="top" style="width: 100%; z-index: 100;"> <view class="displyFlex"> <u-search search-icon-color="#629ff0" ...

    <template>
        <view class="collect">
            <view class="" style="background-color: #FFFFFF; height:20rpx; width: 100%;"></view>
                <view class="news" v-for="(item, index) in list" :key="index">
                    <!-- <image class="img" src="../../static/image/xinxi.png" mode=""></image> -->
                    <view class="newsRight">
                        <view class="tips">系统消息</view>
                        <view class="time hui">{{ item.addTime }}</view>
                        <!-- <view class="icon">1</view> -->
                    </view>
                    <view class="newszhong">
                        <view class="content hui">[{{ item.message }}]</view>
                    </view>
                </view>
                    <!-- // 加载状态  uview-->
                <u-loadmore :status="finished" />
                <view class="" style="height: 150rpx;">
                    
                </view>
        </view>
    </template>

    <script>
    export default {
        data() {
            return {
                list: [],
                listQuery: {
                    page: 1,
                    limit: 10
                },
                total:1,
                finished: 'nomore',    // 加载状态
            };
        },
        onShow() {
        
            // 清空列表
            this.list=[]
            this.getList();
            
        },
        // 触底加载更多
        onReachBottom() {
            console.log(this.finished)
                 console.log(this.listQuery.page)
                 if (this.listQuery.page >= this.total) {
                     console.log('1111')
                     this.finished = 'nomore'; //已经滑到底的提醒
                     return false;
                 }else{
                     this.listQuery.page++;
                     this.getList();
                     }
               },
        methods: {
            // 获取页面内容
            getList: function() {
            
                this.$ajax({
                    url: '/teacher/notify/selectAllNotify?staffId=' + this.user.staffId + '&pageNum=' + this.listQuery.page + '&pageSize=' + this.listQuery.limit,
                    method: 'GET'
                }).then(data => {
                    
                        console.log(data);
                        
                        let dataBackups = data.data.list;
                        if(dataBackups.length>0){
                            //         3                9/3
                            this.total = Math.ceil(data.data.total / this.listQuery.limit);
                            // console.log(this.total)
                            // 拼接数组
                            this.list = this.list.concat(dataBackups);
                            // 加载状态
                            this.finished='loading'
                            if (this.listQuery.page >= this.total) {
                                this.finished = 'nomore';
                            }
                        }else{
                            this.finished = 'nomore';
                        }
                });
            },
        }
    };
    </script>

    <style scoped>
    .traceDate {
        margin: 30rpx;
    }
    .cardBottom {
        display: flex;
        justify-content: space-between;

        height: 70rpx;
        line-height: 70rpx;
    }
    .poputop {
        display: flex;
        justify-content: space-between;
        width: 400rpx;
        margin: 0 auto;
        padding: 20rpx;
        padding-left: 40rpx;
        padding-right: 40rpx;
    }
    .cimage {
        background-color: #c0c0c0;
        width: 100rpx;
        height: 100rpx;
    }
    .wiht {
        width: 100rpx;
        /* height: 100rpx; */
        text-align: center;
        line-height: 50rpx;
    }
    .imga {
        width: 80rpx;
        height: 80rpx;
    }

    .news {
        margin: 20rpx 0 20rpx 0;
        overflow: hidden;
        padding: 20rpx;
        background-color: #ffffff;
        border-bottom: 1rpx solid #dedede;
        line-height: 50rpx;
    }
    .tips {
        float: left;
        color: #f1a334;
    }
    .hui {
        color: #c0c0c0;
    }
    .img {
        margin-top: 15rpx;
        width: 80rpx;
        height: 60rpx;
        display: block;
        float: left;
    }
    .newszhong {
        margin-left: 20rpx;
    }
    .newsRight {
        position: relative;
        overflow: hidden;
    }
    .icon {
        width: 30rpx;
        height: 30rpx;
        background-color: red;
        text-align: center;
        color: #ffffff;
        border-radius: 50%;
        line-height: 30rpx;
        position: absolute;
        bottom: -40rpx;
        right: 10rpx;
    }
    .time {
        float: right;
    }
    </style>
     

    展开全文
  • 按照uniapp的说法叫下拉下一页数据,这里为了根官方一致,也叫下拉加载更多)。 如何实现 uniapp 内置提供了名为 onReachBottom 的页面生命周期函数。该函数可以实现上拉加载更多的功能。 页面滚动到底部的事件...

    前言

    • Hbuilder X 2.7.14.20200618 (不清楚uniapp的版本,用工具版本代替)
    • 关于怎么拉:对于下拉还是上拉我是分不清的(不管叫下拉还是上拉,都应该有参照物的。在不说参照物的前提下,叫上拉也行,叫下拉也行。)按照uniapp的说法叫下拉下一页数据。为了避免怎么拉的困境,本文叫做页面触底加载更多。

    如何实现

    uniapp 内置提供了名为 onReachBottom 的页面生命周期函数。该函数可以实现页面触底加载更多的功能。

    页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项。

    注意事项

    如果用 scroll-view 组件时,这个方法不起作用,请按照 scroll-view 组件的页面触底加载更多的方法处理。
    此种情况下,去uniapp的插件市场搜索其它方法。

    定义页面底部的触发距离

    可在pages.json里定义某个页面底部的触发距离onReachBottomDistance,比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。

    	"pages": [
    		{
    			"path": "pages/index/index",
    			"style": {
    				"navigationBarTitleText": "首页",
    				"onReachBottonDistance":50    // 距离底部50px时,触发onReachBottom事件
    			}
    		},
    		...
    	]
    

    onReachBottom 函数

    index.vue

    <script>
    	export default {
    		components: {
    		},
    		data() {
    			return {
    			}
    		},
    		async onLoad(options) {
    			console.log("onLoad")
    		},
    		onReady(){
    		},
    		async onReachBottom() {
    			console.log("onReachBottom");
    		},
    		methods: {
    		}
    	}
    </script>
    

    参考

    https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f

    展开全文
  • uni-app下拉刷新触底加载更多

    千次阅读 2019-11-17 19:08:14
    首先在pages.json配置文件中配置 "enablePullDownRefresh": true 需要在哪用加载就配置在路由的style里 两个事件 //下拉刷新 ...//触底加载更多 onReachBottom(e) { console.log('触底...

     首先在pages.json 配置文件中配置    "enablePullDownRefresh": true  需要在哪用加载就配置在路由的style里

    两个事件

    //下拉刷新
    onPullDownRefresh() {
    
    			console.log('下拉刷新');
    			
    		},
    
    //触底加载更多
    
    onReachBottom(e) {
    
    			console.log('触底加载更多');
    
    		}

     完整dome:

    <template>
    	<view>
    		个人中心
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    		<view>请求返回:{{ res }}</view>
    	</view>
    </template>
    
    <script>
    var aThat, _that;
    export default {
    	data: function() {
    		return {
    			res: '',
    			page: 1
    		};
    	},
    	onLoad: function() {
    		_that = this;
    	},
    	methods: {
    		onPullDownRefresh() {
    			console.log('下拉刷新', _that.page);
    			uni.request({
    				url: 'http://localhost/myUniApp/php/onPullDownRefresh.php', //仅为示例,并非真实接口地址。
    				data: {
    					rawData: _that.page
    				},
    				method: 'GET', //请求方式
    				header: {
    					'custom-header': 'application/json' //自定义请求头信息
    				},
    				success: res => {
    					console.log('刷新返回', res.data);
    					(_that.res = 1), (_that.page = 1);
    					uni.stopPullDownRefresh();
    				}
    			});
    		},
    		onReachBottom(e) {
    			console.log('触底加载更多', _that.page);
    			uni.request({
    				url: 'http://localhost/myUniApp/php/onPullDownRefresh.php', //仅为示例,并非真实接口地址。
    				data: {
    					rawData: _that.page
    				},
    				method: 'GET', //请求方式
    				header: {
    					'custom-header': 'application/json' //自定义请求头信息
    				},
    				success: res => {
    					console.log('加载更多返回', res.data);
    					(_that.res = res.data), (_that.page = _that.page + 1);
    					uni.stopPullDownRefresh();
    				}
    			});
    		}
    	}
    };
    </script>
    
    <style></style>
    

    //dome中的测试接口php文件  onPullDownRefresh.php

    <?php
        header("Content-Type:text/html; charset=utf-8");//解决中文乱码
        header("Access-Control-Allow-Origin:application/json"); //解决跨域
        header('Access-Control-Allow-Methods:get');// 响应类型
        mysql_connect('localhost', 'root', 'root');//链接数据库默认账号密码都为root
        mysql_set_charset('utf-8');//解决中文乱码问题
        mysql_select_db('text'); //选择数据库
        
        // 接收前端传过来的参数
    	$rawData =$_GET["rawData"];
         echo $rawData //把接受到的参数返回到前端
    ?>
    

    注意:接口用之前一定要先开启phpStudy不然接口相当于没用  看看就好

    官方下拉刷新:https://uniapp.dcloud.io/api/ui/pulldown?id=onpulldownrefresh
    触底加载更多 》》》生命周期函数:https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F

    展开全文
  • uniapp 下拉刷新和上拉加载更多

    千次阅读 2021-02-05 10:35:53
    uniapp 下拉刷新和下拉加载更多实现代码,兼容小程序,H5,app,真机测试可用。 实现代码 1.在页面写这两方法,分别是下拉刷新和下拉触底的监听事件 // 下拉刷新 onPullDownRefresh() { console.log('...
  • uniapp上拉加载更多

    2021-01-26 16:08:17
    <template> <view class="container"> <view v-for="(item,index) in videoList" :key="index">...</view> //渲染的列表处 ... //loading加载提示处 <uni-load-more :status="load
  • uniapp 上拉加载更多

    千次阅读 2020-08-06 16:15:43
    }, onReachBottom: function() { //触底的时候请求数据,即为上拉加载更多 //为了更加清楚的看到效果,添加了定时器 // 正常应为: _self.getmorenews(); }, methods: { //返回 goback() { uni....
  • 上拉加载更多,方式一: 在pages.json 页面配置style。 然后在页面 onReachBottom(){ console.log('onReachBottom') } 上拉加载更多,方式一: //在scroll-view中lower-threshold='50' @scrolltolower=...
  • uniapp实现滚动到底部加载更多数据

    千次阅读 2020-09-29 15:55:41
    uniapp的生命周期onReachBottom 页面滚动到底部的事件(不是scroll-view滚到底),常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动,则触底事件不会被触发 这种方式适用于单个页面,如果同一个页面...
  • uniapp加载插件的使用

    千次阅读 2020-04-25 10:46:35
    }, // 加载更多 getmorenews() { this.page++;//每触底一次 page +1 if (this.loadingType !== 0) {//loadingType!=0;直接返回 return false; } this.loadingType = 1; uni.showNavigationBarLoading();//...
  • uniapp组件scroll-view+Uview的loadMore 加载更多,效果就是上拉加载,并显示相应状态效果 html: @scrolltolower="bottomOut()"是scroll-view的触底触发事件 <scroll-view :scroll-y="true" class=...
  • //上拉加载更多 getMoreList(){ uni.showNavigationBarLoading(); //导航栏显示加载动画 uni.request({ url:'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page, ...
  • 之前的上拉加载更多是通过父组件进行实现的 监听 scrollBottom 属性,如果触底则执行setReachBottom方法 data(){ return{ pageNo:0 } }, props: { scrollBottom: { type: Number, default: 0 } }, watch: ...
  • uniapp上拉加载 uniapp的上拉加载和下拉刷新一样都有两个方法, 一个是整体的上拉(生命周期函数onReachBottom), 一个是局部的上拉(基于scrpll-view组件); 一.整个页面的上拉(onReachBottom) 注意: 使用scroll-view...
  • uniapp 列表滚动加载

    千次阅读 2021-01-07 13:12:06
    最近写uniapp项目,发现很列表页面需要滚动加载数据,为了简化代码,想出以下的解决方法 封装一个mixin用于列表页面混入,具体代码如下: <template name="components"> </template> <script>...
  • hasMore:false , //是否有更多数据 vid:'' , } }, onLoad() { this.getData() //调用函数 }, // 上拉触底事件 onReachBottom:function( ) { if (this.hasMore) { this.getData...
  • current + 1) { //当还有1个视频没有看的时候开始加载数据 if (this.hasMore) { //后台还有更多数据的时候 this.getData() //调用函数加载数据 } else { uni.showToast({ title: '没有...
  • uniapp上拉加载

    2020-09-01 09:20:45
    } } } //上拉触底事件 onReachBottom() { if (this.pages >= this.totalPage) { uni.showToast({ icon: ‘none’, title: ‘没有更多数据了’ }) return } // 加载更多数据 this.pages++; this.getpiao(); //调用...
  • 上拉加载数据,下拉刷新数据 二、代码 1、pages.json 2、messageBoard.vue 用了 uniapp 提供的组件: uni-load-more.vue <uni-load-more :status="loadingText" :contentText="contentText" ></uni-...
  • data(){ return{ page:'1', rows:'5', status: 'more', //上拉状态 loadingType:0, contentText: { contentdown: '上拉加载更多~', contentrefresh: '加载中', contentnomore: '我是有...
  • uni-app小程序上拉刷新下拉加载更多的浅了解 onReachBottom生命周期(页面上拉触底的处理函数) 准备工作 在 data里面定义好 我们想要的一些属性 page:页数 limit:一页有多少条数据 刚进入页面的时候我们的page...
  • uniApp

    2020-12-04 21:28:01
    uniapp使用的开发软件,到创建,到运行,如何打包不同平台的代码,如何打包apk,云打包,如何运行在不同的端7.uniapp怎么进行路由跳转8.怎么配置tabbar9.如何请求接口10.如何使用组件11.基础语法是什么12.生命周期...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 197
精华内容 78
关键字:

uniapp触底加载更多