当前位置: 首页 > news >正文

小程序:下拉刷新+上拉加载+自定义导航栏

下拉刷新 :

 +

 <scroll-view
                scroll-y="true"                              允许纵向滚动
                refresher-enabled="true"             开启自定义下拉刷新  默认为false
                :refresher-triggered="triggered"   设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发
                :refresher-threshold="150"           设置自定义下拉刷新阈值
                refresher-background="#eee"      下拉刷新的背景颜色
                @refresherrefresh="onRefresh"   下拉刷新触发
                @refresherrestore="onRestore"   上拉达到一定的距离
                @refresherabort="onAbort"       上拉过程中取消操作
            >

        下拉刷新的内容区域

</scroll-view>

data() {
        return {
            triggered: false, //下拉刷新标记
        };
    },

methods: {

        // //下拉刷新
        onRefresh() {
            this.triggered = true
            this.getCount() //提醒消息数量
            this.getRemList() //提醒三条列表

            setTimeout(() => {
                this.triggered = false;
            }, 1000);
        },
        // 在刷新过程中取消刷新
        onRestore() {
            this.triggered = 'restore'; // 需要重置
            console.log('onRestore');
        },
        // 在刷新过程中中止刷新
        onAbort() {
            console.log('onAbort');
        },

}

上拉加载:

<scroll-view
                scroll-y="true"
                class="scroll-Y"
                :style="{
                    height: `calc(100vh - 260rpx)`,
                }"
                @scrolltolower="lower"   //监听滚动事件,当页面滚动到底部时,绑定的方法会被触发。
                :refresher-threshold="150"
                refresher-background="#eee"
                @refresherrefresh="onRefresh"
                @refresherrestore="onRestore"
                @refresherabort="onAbort"
            >
                <view>
                   <!-- 下拉加载的内容 --> 
                </view>

 </scroll-view>

在data中定义开始页  步长  防止触底请求多次标记

data() {
        return {
            datalist: [],//消息列表
            pageNum: 1, //开始页
            pageSize: 10, //步长
            total: '', //list总数

            freshFlag: true, //防止触底请求多次标记
        };
    },

methods: {

        

    //上拉加载触发
        lower(e) {
            // 防止多次请求
            if (!this.freshFlag) {
                return;
            }

            this.freshFlag = false;
            let length = this.datalist.length;
            // 判断是否超出最大长度,超出不请求
            if (this.total > length) {
                this.pullDownNew();
            } else {
                uni.showToast({
                    title: '没有更多了',
                    duration: 2000,
                });
                this.freshFlag = true;
                return;
            }
        },

        //上拉加载请求最新数据拼接
        pullDownNew() {
            uni.showLoading({
                title: '加载中',
            });
            this.pageNum++;
            getRemList({
                pageNum: this.pageNum, //开始页
                pageSize: this.pageSize, //步长
            })
                .then(res => {
                    this.datalist = [...this.datalist, ...res.data.rows];
                    uni.hideLoading();
                    this.freshFlag = true;
                })
                .catch(err => {
                    uni.hideLoading();
                });
        },
 

}

再说一下这个自定义顶部导航的布局方法:

在data中定义状态栏的高度和自定义导航栏的高度

        statusBarHeight: '', // 状态栏高度
        barHeight: '', // 自定义导航栏高度

 

uni.getSystemInfoSync() 是一个Uni-app框架中的API,用于同步获取设备系统信息。) 

wx.getMenuButtonBoundingClientRect()是微信小程序的一个API,用于获取菜单按钮的边界信息。

具体来说,这个API可以用来获取菜单按钮的位置和尺寸信息,包括元素的toprightbottomleftwidthheight等属性。这些信息可以帮助我们更好地了解菜单按钮在界面上的位置和大小,从而更好地进行布局和样式控制。)

wx.getMenuButtonBoundingClientRect()拿到的值表示了菜单按钮的上边缘距离视窗上边缘多少像素,左边缘距离视窗左边缘多少像素,下边缘距离视窗下边缘多少像素,右边缘距离视窗右边缘多少像素,宽度为多少像素,高度为多少像素。

         // 状态栏高度
        this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
        // 胶囊数据
        const { top, height } = wx.getMenuButtonBoundingClientRect();
        // 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
        this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;

整体代码如下: 

<template><view class="remind"><view class="bgc"><view :style="{ height: `${statusBarHeight}px` }"></view><viewclass="customHead":style="{height: `${barHeight}px`,'line-height': `${barHeight}px`,}"><text class="toHome iconfont" @click="toHome">&#xe669;</text><text class="title">提醒消息</text></view></view><view class="scrollList"><scroll-viewscroll-y="true"class="scroll-Y":style="{height: `calc(100vh - 260rpx)`,}"@scrolltolower="lower":refresher-threshold="150"refresher-background="#eee"@refresherrefresh="onRefresh"@refresherrestore="onRestore"@refresherabort="onAbort"><view><!-- 下拉加载的内容 --> </view></scroll-view></view></view>
</template><script>export default {data() {return {statusBarHeight: '', // 状态栏高度barHeight: '', // 自定义导航栏高度avatar: '', //头像datalist: [],//消息列表pageNum: 1, //开始页pageSize: 10, //步长total: '', //list总数freshFlag: true, //防止触底请求多次标记};},onLoad() {this.init();// 状态栏高度this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;// 胶囊数据const { top, height } = wx.getMenuButtonBoundingClientRect();// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;this.avatar = uni.getStorageSync('avatar') //头像},methods: {// 初始化init() {uni.showLoading({});getRemList({pageNum: this.pageNum, //开始页pageSize: this.pageSize, //步长}).then(res => {console.log(res);this.datalist = res.data.rows;  //消息列表this.total = res.data.alltotal;uni.hideLoading();});},// 提醒消息页面回退toHome(){uni.navigateBack()},//上拉加载触发lower(e) {// 防止多次请求if (!this.freshFlag) {return;}this.freshFlag = false;let length = this.datalist.length;// 判断是否超出最大长度,超出不请求if (this.total > length) {this.pullDownNew();} else {uni.showToast({title: '没有更多了',duration: 2000,});this.freshFlag = true;return;}},//上拉加载请求最新数据拼接pullDownNew() {uni.showLoading({title: '加载中',});this.pageNum++;getRemList({pageNum: this.pageNum, //开始页pageSize: this.pageSize, //步长}).then(res => {this.datalist = [...this.datalist, ...res.data.rows];uni.hideLoading();this.freshFlag = true;}).catch(err => {uni.hideLoading();});},},
};
</script><style lang="scss">.bgc{height: 260rpx;background: linear-gradient(180deg, #ffb588 -17.42%, rgba(255, 220, 167, 0) 119.43%);
}
.customHead {padding-left: 10rpx;display: flex;align-items: center;position: relative;.title {position: absolute;left: 50%;transform: translateX(-50%);}
}.remind{.scrollList {width: 100vw;margin-bottom: 20rpx;}}</style>

 

相关文章:

小程序:下拉刷新+上拉加载+自定义导航栏

下拉刷新 &#xff1a; <scroll-view scroll-y"true" 允许纵向滚动 refresher-enabled"true" 开启自定义下拉刷新 默认为false :refresher-triggered&quo…...

判断两个二叉树是否相等

bool isSameTree(struct TreeNode* p, struct TreeNode* q) {//两个都为空if(pNULL&&qNULL){return true;}//有一个为空if(pNULL||qNULL){return false;}//两个不为空&#xff0c;但值不相同if(p->val!q->val){return false;}//值相同return isSameTree(p->le…...

springcloud----检索中间件 ElasticSearch 分布式场景的运用

如果对es的基础知识有不了解的可以看 es看这个文章就会使用了 1.分布式集群场景下的使用 单机的elasticsearch做数据存储&#xff0c;必然面临两个问题&#xff1a;海量数据存储问题、单点故障问题。 海量数据存储问题&#xff1a;将索引库从逻辑上拆分为N个分片&#xff08…...

qt创建线程类并实现通信 C++

需求描述&#xff1a; 通过VS创建了一个QT项目&#xff0c;我需要一个线程类去实时获取设备取流的图像&#xff0c;并将图像传给qt的类用于在QLabel上显示。 实现&#xff1a; 头文件&#xff1a; //include ...省略//Qt界面的类Your_Project class Your_Project : public Q…...

【elasticsearch】使用自建证书搭建elasticsearch8.0.1集群

概述 本文将分享使用自建证书搭建加密的es集群&#xff0c;如果想使用rpm包安装&#xff0c;前期的搭建过程请参考上面一篇文章https://blog.csdn.net/margu_168/article/details/133344675。后续的操作与使用tar包安装的类似&#xff0c;只是需要注意目录的区别。 es8.0.1安…...

一篇文章带你用动态规划解决打家劫舍问题

动态规划的解题步骤可以分为以下五步&#xff0c;大家先好好记住 1.创建dp数组以及明确dp数组下标的含义 2.制定递推公式 3.初始化 4.遍历顺序 5.验证结果 根据打家劫舍的题意&#xff1a;两个直接相连的房子在同一天晚上被打劫会触发警报 所以我们制定出核心策略——偷东…...

idea中导入eclipse的javaweb项目——tomact服务(保姆级别)

idea中导入eclipse的javaweb项目——tomact服务&#xff08;保姆级别&#xff09; 1. 导入项目2. Project Settings下的各种配置步骤2.1 检查/修改 jdk 的引入2.2 配置Modules-Dependencies2.2.1 删掉eclipse相关的多余配置2.2.2 删掉jar包2.2.3 添加tomcat的依赖 2.3 配置Libr…...

【开源】给ChatGLM写个,Java对接的SDK

作者&#xff1a;小傅哥 - 百度搜 小傅哥bugstack 博客&#xff1a;bugstack.cn 沉淀、分享、成长&#xff0c;让自己和他人都能有所收获&#xff01;&#x1f604; 大家好&#xff0c;我是技术UP主小傅哥。 清华大学计算机系的超大规模训练模型 ChatGLM-130B 使用效果非常牛&…...

基于Pytest+Allure+Excel的接口自动化测试框架

1. Allure 简介 简介 Allure 框架是一个灵活的、轻量级的、支持多语言的测试报告工具&#xff0c;它不仅以 Web 的方式展示了简介的测试结果&#xff0c;而且允许参与开发过程的每个人可以从日常执行的测试中&#xff0c;最大限度地提取有用信息。 Allure 是由 Java 语言开发的…...

20.2 FMC驱动SDRAM的时序初始化实现及内存测试

继续上一篇的话题&#xff0c;写到SDRAM通过CubeMx配置后&#xff0c;在工程代码编写时直接引用的是我事先写好的时序初始化、内存测试文件&#xff0c;而未对其进行详细的解释&#xff0c;所以本篇文章就来娓娓道来。不多说&#xff0c;开始吧 SDRAM的初始化流程简述 SDRAM初…...

联想电脑一键重装系统Win10操作方法

很多用户都会利用重装系统的方法&#xff0c;来解决系统崩溃、病毒感染等问题。但是&#xff0c;很多新手用户不知道联想电脑Win10系统重装的详细方法步骤&#xff0c;下面小编给大家详细介绍关于联想电脑Win10系统重装的操作方法&#xff0c;帮助大家轻松快速地完成系统的重装…...

Mysql数据库 1.概述

Mysql内容概述 1. Mysql概述 数据库相关概念&#xff1a; 名称 全称 简称 数据库 存储数据的仓库&#xff0c;数据是有组织的进行存储 …...

Qt编程,文件操作、UDP通信

目录 1、文件类 QFile 2、 UPD/TCP网络编程 1、##UDP客户端 2、##UDP服务器端 1、文件类 QFile QFile file(filename); file.exists() file.setFileName(filename1); file.fileName() file.bytesAvailable() file.size() file.copy("2.txt") file1.errorString(…...

Docker 的数据管理和Dockerfile镜像的创建

目录 Docker 的数据管理 管理 Docker 容器中数据的方式 端口映射 容器互联&#xff08;使用centos镜像&#xff09; Docker 镜像的创建 Dockerfile 操作常用的指令 编写 Dockerfile 时格式 Dockerfile 案例 Docker 的数据管理 管理 Docker 容器中数据的方式 管理 Doc…...

[python] 利用 Pydoc 快速生成整个 Python 项目的文档

如何写注释 class MyClass:"""This is a simple example class.Attributes:param1 (int): The first parameter.param2 (str): The second parameter."""def __init__(self, param1, param2):"""The constructor for MyClass.:p…...

Maven 配置指南

目录 一、配置本地存储库 二、配置并行Artifact 解析 三、安全和部署设置 四、将镜像用于存储库 五、Profiles 六、可选配置 七、Settings 八、安全性 九、工具链 Maven配置发生在3个级别&#xff1a; 项目-大多数静态配置发生在pom.xml中安装-这是为Maven安装添加的…...

第十八章 类和对象——多态

一、多态的基本概念 多态是C面向对象三大特性之一 多态分为两类 静态多态: 函数重载 和 运算符重载属于静态多态&#xff0c;复用函数名 动态多态: 派生类和虚函数实现运行时多态 静态多态和动态多态区别&#xff1a; 静态多态的函数地址早绑定 - 编译阶段确定函数地址 动…...

京东数据平台:2023年服饰行业销售数据分析

最近看到有些消费机构分析&#xff0c;不少知名的运动品牌都把“主战场”放到了冲锋衣&#xff0c;那么羽绒服市场就比较危险了。但其实羽绒服市场也有机会点可寻。 先来说冲锋衣。的确&#xff0c;从今年的销售数据以及增长情况&#xff0c;冲锋衣的确会是今年冬天的大热门品…...

Nginx proxy_set_header参数设置

一、不设置 proxy_set_header Host 不设置 proxy_set_header Host 时&#xff0c;浏览器直接访问 nginx&#xff0c;获取到的 Host 是 proxy_pass 后面的值&#xff0c;即 $proxy_host 的值&#xff0c;参考Module ngx_http_proxy_module 1 2 3 4 5 6 7 8 # cat ngx_header.c…...

如何用 ChatGPT 的 Advanced Data Analysis 帮你采集数据?

&#xff08;注&#xff1a;本文为小报童精选文章&#xff0c;已订阅小报童或加入知识星球「玉树芝兰」用户请勿重复付费&#xff09; 想采集网页数据却不会写 Python 爬虫&#xff1f;不会就不会吧&#xff0c;ChatGPT 会就可以了 &#x1f602; 问题描述 朋友最近遇到了一点儿…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

GraphQL 实战篇:Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...

网页端 js 读取发票里的二维码信息(图片和PDF格式)

起因 为了实现在报销流程中&#xff0c;发票不能重用的限制&#xff0c;发票上传后&#xff0c;希望能读出发票号&#xff0c;并记录发票号已用&#xff0c;下次不再可用于报销。 基于上面的需求&#xff0c;研究了OCR 的方式和读PDF的方式&#xff0c;实际是可行的&#xff…...

qt+vs Generated File下的moc_和ui_文件丢失导致 error LNK2001

qt 5.9.7 vs2013 qt add-in 2.3.2 起因是添加一个新的控件类&#xff0c;直接把源文件拖进VS的项目里&#xff0c;然后VS卡住十秒&#xff0c;然后编译就报一堆 error LNK2001 一看项目的Generated Files下的moc_和ui_文件丢失了一部分&#xff0c;导致编译的时候找不到了。因…...

当下AI智能硬件方案浅谈

背景&#xff1a; 现在大模型出来以后&#xff0c;打破了常规的机械式的对话&#xff0c;人机对话变得更聪明一点。 对话用到的技术主要是实时音视频&#xff0c;简称为RTC。下游硬件厂商一般都不会去自己开发音视频技术&#xff0c;开发自己的大模型。商用方案多见为字节、百…...