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

下拉刷新 :

 +

 <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>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/102465.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iOS 获取模拟器沙盒路径

xcrun simctl get_app_container booted Bundle Identifier data

WorkPlus定制化的局域网会议软件,提供安全稳定的会议体验

在现代商业环境中&#xff0c;迅速而高效的沟通是企业成功的关键要素之一。而在传统的会议模式下&#xff0c;时间成本和地理限制往往给企业带来不小的困扰。针对这一问题&#xff0c;WorkPlus推出了一款创新的局域网会议软件——WorkPlus Meet&#xff0c;旨在为企业创造高效的…

数据集笔记:分析OpenCellID 不同radio/ create_time update_time可视化

1 读取数据 &#xff08;以新加坡的cellID为例&#xff09; import geopandas as gpd import pandas as pdopencellidpd.read_csv(OpenCellID_SG.csv,headerNone,names[radio,mcc,net,area,cell,unit,lon,lat,range,samples,changeable1,created1,updated,AveSignal]) opence…

【数据库问题】删除数据库失败,提示:there is 1 other session using the database

删除数据库失败&#xff0c;提示&#xff1a;there is 1 other session using the database 解决办法&#xff1a; SELECT pg_terminate_backend(pg_stat_activity.pid) FROM pg_stat_activity WHERE datnametest_database AND pid<>pg_backend_pid(); 使用上述命令先关…

wireshark抓rtp包,提取出H265裸流数

调试rtsp收发流时&#xff0c;经常会需要抓包以确认是网络问题还是程序问题还是其它问题。通过tcpdump或者wireshark抓到的包通常是rtp流&#xff0c;保存为.pcap格式文件后中&#xff0c;可通过wireshark进行解析&#xff0c;得出h264裸流&#xff0c;并保存为文件。 1.wires…

淘宝天猫商品评论数据接口,淘宝天猫商品评论API接口,淘宝API

淘宝商品评论数据接口可以通过淘宝开放平台API获取。 通过构建合理的请求URL&#xff0c;可以向淘宝服务器发起HTTP请求&#xff0c;获取商品评论数据。接口返回的数据一般为JSON格式&#xff0c;包含了商品的各种评价信息。获取到商品评论数据后&#xff0c;可以对其进行处理…

stm32 hal库 st7789 1.54寸lcd

文章目录 前言一、软件spi1.cubemx配置2.源码文件 二、硬件spi1.cubemx配置2.源码文件3.小小修改 总结 前言 1.54寸lcd 240*240 一、软件spi 1.cubemx配置 一定要注意把这几个东西上拉。 使用c8 2.源码文件 我使用的是中景园的源码&#xff0c;他本来是是标准库的稍微修改…

docker入门加实战—docker常见命令

docker入门加实战—docker常见命令 在介绍命令之前&#xff0c;先用一副图形象的展示一下docker的命令&#xff1a; 常见命令 docker的常见命令和文档地址如下表&#xff1a; 命令说明文档地址docker pull拉取镜像docker pulldocker push推送镜像到DockerRegistrydocker pus…

模拟pdf运行js脚本触发xss攻击及防攻击

一、引入pdfbox依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>3.0.0</version> </dependency> 二、生成一个带js脚本的pdf文件 //Creating PDF document object PDDocum…

JMeter接口测试:简单到离谱(只需Python和几行代码)

JMeter是一款开源的负载测试工具&#xff0c;可以进行各种类型的性能和功能测试&#xff0c;其中包括接口测试。本文将介绍如何使用Python语言利用JMeter进行接口测试&#xff0c;并提供一些实用的技巧和最佳实践。 同时&#xff0c;我也准备了一份软件测试视频教程&#xff0…

【【萌新的SOC学习之GPIO之MIO控制LED实验程序设计】】

萌新的SOC学习之GPIO之MIO控制LED实验程序设计 如何设置完GPIO并且传递数据 我们先了解GPIO引脚的配置 每一个GPIO引脚都可以设置成输入输出 &#xff0c;只有GPIO8 7 只能作为输出 我们现在做一个例子 GPIO 的bank我们知道有4个 bank0 1 2 3 DIRM_0 就是第一个bank 需要写入…

访问Apache Tomcat的manager页面

配置访问Tomcat manager页面的用户名、密码、角色 Tomcat安装完成后&#xff0c;包含了一个管理应用&#xff0c;默认安装在 <Tomcat安装目录>/webapps/manager 例如&#xff1a; 要使用管理页面的功能&#xff0c;需要在conf/tomcat-users.xml文件中配置用户、密码及…

我用了多年的前端框架,强烈推荐!

大家好&#xff0c;我是鱼皮&#xff0c;今天给大家分享一个我自己用了多年、现在团队也在用的前端框架 —— Ant Design Pro。 什么是 Ant Design Pro&#xff1f; Ant Design Pro 是由蚂蚁金服开发的、基于 Ant Design 组件库的开发框架&#xff0c;专门用于构建企业级管理…

LeetCode【15】三数之和

题目&#xff1a; 解析&#xff1a; 参考&#xff1a;https://zhuanlan.zhihu.com/p/111715985 代码&#xff1a; public static List<List<Integer>> threeSum(int[] nums) {// 先排序Arrays.sort(nums);List<List<Integer>> result new ArrayLis…

python pip安装超时使用国内镜像

网络环境差的时候需要我们独立的进行相对应的包下载离线安装&#xff0c;或者给pip 加上 国内的镜像源比如加上清华的镜像源&#xff1a; 参考网址&#xff1a;pypi | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror https://mirrors.tuna.tsinghua…

springcloud学习笔记(3)-服务管理组件Nacos

Nacos简介 在2中学习了服务治理中心eureka&#xff0c;而本节的nacos来自springcloud alibaba。 Nacos也是一个服务注册和管理的组件。 Nacos 支持几乎所有主流类型的“服务”的发现、配置和管理 官方文档 快速开始 | Spring Cloud Alibaba (aliyun.com) 概述 | Spring C…

Websocket获取B站直播间弹幕教程——第二篇、解包/拆包

教程一、Websocket获取B站直播间弹幕教程 — 哔哩哔哩直播开放平台 1、封包 我们连接上B站Websocket成功后&#xff0c;要做两件事情&#xff1a; 第一、发送鉴权包。第二、发送心跳包&#xff0c;每30秒一次&#xff0c;维持websocket连接。 这两个包不是直接发送过去&…

yolov8 (2) : 模型训练

yolov8 github: https://github.com/ultralytics/ultralytics yolov8 网络详解参见: YOLOv8 (1) : 网络讲解1. 环境安装 安装ultralytics包pip install ultralytics在终端输入yolo命令࿰

使用wireshark解密ipsec ISAKMP包

Ipsec首先要通过ikev2协议来协商自己后续协商所用的加解密key以及用户数据的esp包用的加解密包。 ISAKMP就是加密过的ike-v2的加密包&#xff0c;有时候我们需要解密这个包来查看协商数据。如何来解密这样的包? 首先导出strongswan协商生成的各种key. 要能导出这些key&#…

适合自学的网络安全基础技能“蓝宝书”:《CTF那些事儿》

CTF比赛是快速提升网络安全实战技能的重要途径&#xff0c;已成为各个行业选拔网络安全人才的通用方法。但是&#xff0c;本书作者在从事CTF培训的过程中&#xff0c;发现存在几个突出的问题&#xff1a; 1&#xff09;线下CTF比赛培训中存在严重的 “最后一公里”问题 &#…