uniapp swiper设置高度以及切换时滚动条回到顶部,下滑加载

本文主要是介绍uniapp swiper设置高度以及切换时滚动条回到顶部,下滑加载,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

getSwiperItemHeight(current = 0) {uni.createSelectorQuery().in(this).selectAll('.swiper-item-wrap').boundingClientRect().exec(res => {console.log(res, "高度是什么")this.swiperItemHeight = res[0][current].heightlet windowHeight = uni.getSystemInfoSync().windowHeight;let height = (windowHeight * 2) - 176 - 72})},async changeTabIndex(e) {// 在这里判断,发请求。if (this.loading == true) {} else {this.current = e.detail.currentawait this.loadData()this.$nextTick(() => {this.contentTop = this.scrollTopthis.$nextTick(() => {this.contentTop = 0})this.getSwiperItemHeight(e.detail.current)})}},
	<scroll-view scroll-y @scrolltolower="lowerBottom" class="scrollHeight" :scroll-top="contentTop"@scroll="onScroll"><view class="container" style="padding-bottom: 0rpx;"><swiper :style="{height: swiperItemHeight + 'px'}" class="swiper" :current="current"@change="changeTabIndex"><swiper-item><view class="swiper-item-wrap"><scroll-view scroll-y @scrolltolower="lowerBottom"><view><swiperItem :rankData="dayRankData" @getSwiperItemHeight="getSwiperItemHeight"></swiperItem></view></scroll-view></view></swiper-item></swiper></view></scroll-view>
scrollHeight {height: 100%;position: fixed;top: 268rpx;left: 0;background-color: transparent;}

这篇关于uniapp swiper设置高度以及切换时滚动条回到顶部,下滑加载的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/802670

相关文章

[word] word设置上标快捷键 #学习方法#其他#媒体

word设置上标快捷键 办公中,少不了使用word,这个是大家必备的软件,今天给大家分享word设置上标快捷键,希望在办公中能帮到您! 1、添加上标 在录入一些公式,或者是化学产品时,需要添加上标内容,按下快捷键Ctrl+shift++就能将需要的内容设置为上标符号。 word设置上标快捷键的方法就是以上内容了,需要的小伙伴都可以试一试呢!

uniapp接入微信小程序原生代码配置方案(优化版)

uniapp项目需要把微信小程序原生语法的功能代码嵌套过来,无需把原生代码转换为uniapp,可以配置拷贝的方式集成过来 1、拷贝代码包到src目录 2、vue.config.js中配置原生代码包直接拷贝到编译目录中 3、pages.json中配置分包目录,原生入口组件的路径 4、manifest.json中配置分包,使用原生组件 5、需要把原生代码包里的页面修改成组件的方

swiper实例

大家好,我是燐子,今天给大家带来swiper实例   微信小程序中的 swiper 组件是一种用于创建滑动视图的容器组件,常用于实现图片轮播、广告展示等效果。它通过一系列的子组件 swiper-item 来定义滑动视图的每一个页面。 基本用法   以下是一个简单的 swiper 示例代码:   WXML(页面结构) <swiper autoplay="true" interval="3

加载资源文件失败

背景         自己以前装了一个海康的深度学习算法平台,试用期是一个月,过了一个月之后,因为没有有效注册码或者加密狗的支持了导致无法使用,于是打算卸载掉,在卸载一个软件的时候,无论是使用控制面板还是软件自带的卸载功能,总是卸载不掉,提示“加载资源文件失败”。该软体主要包括以下两部分: 用自带卸载功能卸载的时候分别提示如下:     用控制面板卸载的时候反应很慢,最后也是提示这个

vue同页面多路由懒加载-及可能存在问题的解决方式

先上图,再解释 图一是多路由页面,图二是路由文件。从图一可以看出每个router-view对应的name都不一样。从图二可以看出层路由对应的组件加载方式要跟图一中的name相对应,并且图二的路由层在跟图一对应的页面中要加上components层,多一个s结尾,里面的的方法名就是图一路由的name值,里面还可以照样用懒加载的方式。 页面上其他的路由在路由文件中也跟图二是一样的写法。 附送可能存在

高度内卷下,企业如何通过VOC(客户之声)做好竞争分析?

VOC,即客户之声,是一种通过收集和分析客户反馈、需求和期望,来洞察市场趋势和竞争对手动态的方法。在高度内卷的市场环境下,VOC不仅能够帮助企业了解客户的真实需求,还能为企业提供宝贵的竞争情报,助力企业在竞争中占据有利地位。 那么,企业该如何通过VOC(客户之声)做好竞争分析呢?深圳天行健企业管理咨询公司解析如下: 首先,要建立完善的VOC收集机制。这包括通过线上渠道(如社交媒体、官网留言

uniapp H5打开地图

manifest.json文件,源码视图找到H5添加下面内容 "h5" : {"sdkConfigs" : {"maps" : {"amap" : {"key" : "**********************","securityJsCode" : "****************************","serviceHost" : ""}}}} 高德开放平台 申请时选择(W

如何设置windows计划任务

如何设置windows计划任务 前言:在工作过程中写了一个python脚本,用于调用jira接口查询bug单数量,想要在本地定时任务执行,每天发送到钉钉群提醒,写下操作步骤用于记录。 1. 准备 Python 脚本 确保你的 Python 脚本已经保存到一个文件,比如 jira_reminder.py。 2. 创建批处理文件 为了方便任务计划程序运行 Python 脚本,创建一个批处理文

FastAdmin/bootstrapTable 表格中生成的按钮设置成文字

公司有个系统后台框架用的是FastAdmin,后台表格的操作栏按钮只有图标,想要设置成文字。 查资料后发现其实很简单,主需要新增“text”属性即可,如下 buttons: [{name: 'acceptcompany',title: '复核企业',text:'复核企业',classname: 'btn btn-xs btn-primary btn-dialog',icon: 'fa fa-pe

众所周知,配置即代码≠基础设置即代码

​前段时间翻到几条留言,问: “配置即代码和基础设施即代码一样吗?” “配置即代码是什么?怎么都是基础设施即代码?” 我们都是知道,DevOp的快速发展,让服务器管理与配置的时间大大减少,配置即代码和基础设施即代码作为DevOps的重要实践,在其中起到了关键性作用。 不少人将二者看作是一件事,配置即大代码是关于管理特定的应用程序配置设置本身,而基础设施即代码更关注的是部署支持应用程序环境所需的