当前位置：网站首页>解决uniapp列表快速滑动页面数据空白问题
解决uniapp列表快速滑动页面数据空白问题
2022-07-02 09:32:00 【Z.RF】
前言：
近期UNIAPP架构开发小程序时，项目收尾整体流程测试发现，Swiper滑动嵌套Scroll列表加载更多时候，如果用户快速滑动列表加载会导致页面空白或者直接卡死，官方文档不建议使用scroll滚动趋势线长列表加载，swiper中不用scroll，高度计算不准确，list又不太好触发滑到底部事件，反反复复各种优化各种改，最终在z-paging自定义中把这个问题处理掉了，效果跟需求几乎满足百分之九十五以上。↓↓↓↓↓↓ 如下效果
上滑加载下拉刷新
下拉刷新上滑加载组件
https://ext.dcloud.net.cn/plugin?id=3935
<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
<view class="content">
<!-- 此处为了让reload时不自动滚动到顶部，需要设置auto-clean-list-when-reload和auto-scroll-to-top-when-reload为false，即在reload时关闭自动清空数组和自动滚动到顶部 -->
<z-paging
ref="paging"
v-model="dataList"
@query="queryList"
:fixed="false"
empty-view-text="抱歉，暂时还没有相关数据！"
:auto="false"
>
<!-- <view class="banner-view" style="height: 260rpx"> </view> -->
<view class="item" v-for="(item, index) in dataList" :key="index">
<view class="ul">
<!--所有涉及到文章的 有2个样式 1个是带缩略图的 1个是不带缩略图的-->
<!--带缩略图的-->
<view>
<view
class="li"
@click="goArticleInfo(item)"
v-if="item.content_row.has_thumb == 1"
>
<view class="font">
<text class="p">{
{ item.content_row.title }}</text>
<text class="span">{
{ item.content_row.created }}</text>
</view>
<view class="pic">
<image :src="item.content_row.thumb" mode="widthFix"></image>
</view>
</view>
<view class="li" @click="goArticleInfo(item)" v-else>
<!--不带缩略图的-->
<view class="fontwenzi">
<text class="title">{
{ item.content_row.title }}</text>
<text class="info">{
{
item.content_row.description.replace(/\s+/g, "")
}}</text>
<text class="span">{
{ item.content_row.created }}</text>
</view>
</view>
</view>
</view>
</view>
<!-- -->
</z-paging>
</view>
</template>
<script>
export default {
data() {
return {
//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
dataList: [],
firstLoaded: false,
};
},
props: {
//当前组件的index，也就是当前组件是swiper中的第几个
tabIndex: {
type: Number,
default: function () {
return 0;
},
},
// 类别id
typeid: {
type: Number,
default: function () {
return 0;
},
},
//当前swiper切换到第几个index
currentIndex: {
type: Number,
default: function () {
return 0;
},
},
},
watch: {
currentIndex: {
handler(newVal) {
if (newVal === this.tabIndex) {
//懒加载，当滑动到当前的item时，才去加载
if (!this.firstLoaded) {
setTimeout(() => {
this.$refs.paging.reload();
}, 100);
}
}
},
immediate: true,
},
},
methods: {
/**
* 选中事件
* @param {*} item
*/
goArticleInfo(item){
this.$emit("goArticleInfo",item);
},
/**
*
* @param {*} page
* @param {*} pageSize
*/
queryList(page, pageSize) {
//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
//模拟请求服务器获取分页数据，请替换成自己的网络请求
var that = this;
that
.$http(
"/article/?page=" +
page +
"&pageSize=" +
pageSize +
"&typeid=" +
this.typeid,
"POST",
{},
{}
)
.then((res) => {
if (res.code == 200) {
that.classify_list = res.classify_list;
that.classify_list.unshift({
id: 0,
name: "全部",
});
setTimeout(function () {
uni.hideLoading();
}, 800);
//将请求的结果数组传递给z-paging
this.$refs.paging.complete(res.list);
} else if (res.code == 400) {
this.$refs.paging.complete(res.list);
} else {
uni.showToast({
title: "接口异常！",
icon: "none",
duration: 2000,
});
}
});
},
},
};
</script>
<style>
/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
.content {
height: 100%;
padding-top: 280rpx;
}
.item {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0rpx 30rpx;
}
.item-detail {
padding: 5rpx 15rpx;
border-radius: 10rpx;
font-size: 28rpx;
color: white;
background-color: #007aff;
}
.item-line {
position: absolute;
bottom: 0rpx;
left: 0rpx;
height: 1px;
width: 100%;
background-color: #eeeeee;
}
/* css */
.content {
overflow: hidden;
width: 100%;
}
.closedbox image {
width: 20rpx;
}
.content .loding {
overflow: hidden;
height: 68rpx;
background: #f8f8f8;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.content .loding image {
width: 24rpx;
border-radius: 50%;
animation: turn 2s linear infinite;
}
.content .loding .span {
font-size: 22rpx;
color: #999999;
margin-left: 10rpx;
}
.fadeins {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: fixed;
left: 0;
top: 0;
z-index: 999;
}
.select_box {
width: 100%;
height: 1rpx;
border-top: 1px solid #efefef;
display: flex;
align-items: center;
/* // z-index: 9999; */
background: #fff;
position: relative;
}
.main_science {
overflow: hidden;
padding: 0rpx 30rpx 0 30rpx;
}
.ul {
overflow: hidden;
}
.ul .li:last-child {
border: none;
}
.ul .li {
overflow: hidden;
display: flex;
padding: 40rpx 0;
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: space-between;
border-bottom: 1px solid #f1f1f1 !important;
}
.ul .li .font {
overflow: hidden;
width: 365rpx;
}
.ul .li .font .p {
font-size: 32rpx;
color: #333333;
line-height: 42rpx;
display: block;
margin-bottom: 34rpx;
}
.ul .li .font .span {
display: block;
font-size: 26rpx;
color: #9a9ca0;
}
.ul .li .fontwenzi {
overflow: hidden;
width: 100%;
}
.ul .li .fontwenzi .title {
font-size: 33rpx;
color: #333333;
line-height: 42rpx;
display: block;
margin-bottom: 34rpx;
}
.ul .li .fontwenzi .info {
font-size: 26rpx;
color: #8c8c8c;
line-height: 42rpx;
display: block;
margin-bottom: 34rpx;
}
.ul .li .fontwenzi .span {
display: block;
font-size: 26rpx;
color: #9a9ca0;
}
.ul .li .pic {
overflow: hidden;
width: 260rpx;
border-radius: 20rpx;
}
.ul .li .pic image {
display: block;
width: 100%;
}
</style>
页面中使用调用
<!-- 滑动切换选项卡演示(标准写法) -->
<template>
<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
<view>
<!-- 吸顶 -->
<u-sticky>
<!-- 只能有一个根元素 -->
<view class="sticky" style="background-color: #fff !important">
<uni-nav-bar
statusBar
leftIcon="back"
@clickLeft="goback"
fixed="true"
title="医药文章科普"
height="50"
:border="false"
>
</uni-nav-bar>
<view class="sroll_list">
<!-- show-scrollbar="true" -->
<scroll-view
scroll-x="true"
enable-flex="true"
:scroll-into-view="'tab' + navbarindex"
scroll-with-animation
>
<view
class="li"
:class="navbarindex == index ? 'on' : ''"
v-for="(item, index) in classify_list"
:key="index"
@click="getTab(item, index)"
:id="'tab' + index"
>
{
{ item.name }}
</view>
</scroll-view>
<view class="menu" @click="show = true">
<image src="../../static/addicon4.png" mode="widthFix"></image>
</view>
</view>
</view>
</u-sticky>
<view
class="main_article_fade"
@touchmove.stop.prevent="moveHandle"
v-if="show"
>
<view class="box">
<view class="ul">
<view
class="li"
v-for="(item, index) in classify_list"
:key="index"
:class="navbarindex == index ? 'on' : ''"
@click="getTab(item, index)"
>{
{ item.name }}</view
>
<image
@click="getDShow"
src="../../static/icon-close.png"
mode="widthFix"
></image>
</view>
</view>
</view>
<view class="select_box"></view>
<z-paging-swiper>
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面 -->
<swiper
class="swiper"
:current="navbarindex"
@animationfinish="animationfinish"
>
<swiper-item
class="swiper-item"
v-for="(item, index) in classify_list"
:key="index"
>
<article-item
:tabIndex="index"
:typeid="typeid"
@goArticleInfo="goArticleInfo"
:currentIndex="navbarindex"
></article-item>
</swiper-item>
</swiper>
</z-paging-swiper>
</view>
</template>
<script>
export default {
data() {
return {
typeid: 0,
show: false,
classify_list: [],
navbarindex: 0, // tabs组件的current值，表示当前活动的tab选项
};
},
mounted() {
uni.showLoading({
title: "加载中",
});
this.initData();
},
methods: {
getDShow() {
this.show = !this.show;
},
/**
* 跳转详情
*/
goArticleInfo(item) {
console.log(item);
uni.navigateTo({
url: "/pages/article/info?id=" + item.content_row.id,
});
},
goback() {
uni.navigateBack({
delta: 1,
});
},
/**
*根据分类获取科普文章列表
*@param {item}当前选中标签的数据id/name
*@param {index}当前选中标签状态索引
*@param {show} 遮罩层状态
*/
getTab(item, index) {
console.log(item, index);
this.navbarindex = index;
this.typeid = item.id;
this.show = false;
uni.showLoading({
title: "加载中",
});
// //当切换tab时请调用组件的reload方法，请勿直接调用：queryList方法！！
// this.$refs.paging.reload();
},
//swiper滑动结束
animationfinish(e) {
let navbarindex = e.detail.current;
console.log("e.detail.current", e.detail.current);
this.navbarindex = e.detail.current;
this.typeid = this.classify_list[e.detail.current].id;
uni.showLoading({
title: "加载中",
});
},
/**
* 初始化获取数据
*/
initData() {
var that = this;
that
.$http("接口地址" , "POST", {}, {})
.then((res) => {
if (res.code == 200) {
console.log("z", res);
that.classify_list = res.classify_list;
that.classify_list.unshift({
id: 0,
name: "全部",
});
setTimeout(function () {
uni.hideLoading();
}, 800);
} else {
uni.showToast({
title: "接口异常！",
icon: "none",
duration: 2000,
});
}
});
},
},
};
</script>
<style>
.swiper {
height: 100%;
}
.item {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0rpx 30rpx;
}
.item-detail {
padding: 5rpx 15rpx;
border-radius: 10rpx;
font-size: 28rpx;
color: white;
background-color: #007aff;
}
.item-line {
position: absolute;
bottom: 0rpx;
left: 0rpx;
height: 1px;
width: 100%;
background-color: #eeeeee;
}
/* css */
.content {
overflow: hidden;
width: 100%;
}
.list_box {
overflow: hidden;
width: 100%;
height: calc(100vh - 100rpx - 105rpx - 10rpx);
}
.list_box swiper {
width: 100%;
height: 100%;
}
.list_box scroll-view {
width: 100%;
height: 100%;
}
.list_box swiper-item {
width: 100%;
height: 100%;
}
.sroll_list {
overflow: hidden;
height: 105rpx;
margin: 0 auto;
display: flex;
padding-bottom: 20rpx;
align-items: center;
background: #fff;
position: relative;
z-index: 9999;
justify-content: space-between;
width: 100%;
padding: 0 30rpx 30rpx 30rpx;
}
.sroll_list .menu {
width: 66rpx;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
}
.sroll_list .menu::after {
content: "";
position: absolute;
left: -15rpx;
top: 50%;
transform: translateY(-50%);
width: 15rpx;
height: 74rpx;
background: url(../../static/pic-menu-line.png) no-repeat;
background-size: contain;
}
.sroll_list .menu image {
width: 36rpx;
}
.sroll_list scroll-view {
width: calc(100% - 66rpx);
height: 100%;
white-space: nowrap;
font-size: 12px;
}
.sroll_list scroll-view .li {
display: inline-flex;
height: 100%;
margin-right: 40rpx;
position: relative;
align-items: center;
font-size: 32rpx;
color: #666666;
}
.sroll_list scroll-view .li.on {
color: #000000;
}
.sroll_list scroll-view .li.on::after {
content: "";
width: 29rpx;
height: 8rpx;
background: url(../../static/addicon2.png);
background-size: 100% 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
.closedbox image {
width: 20rpx;
}
.content .loding {
overflow: hidden;
height: 68rpx;
background: #f8f8f8;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.content .loding image {
width: 24rpx;
border-radius: 50%;
animation: turn 2s linear infinite;
}
.content .loding .span {
font-size: 22rpx;
color: #999999;
margin-left: 10rpx;
}
.fadeins {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: fixed;
left: 0;
top: 0;
z-index: 999;
}
.select_box {
width: 100%;
height: 1rpx;
border-top: 1px solid #efefef;
display: flex;
align-items: center;
/* // z-index: 9999; */
background: #fff;
position: relative;
}
.main_science {
overflow: hidden;
padding: 0rpx 30rpx 0 30rpx;
}
.ul {
overflow: hidden;
}
.ul .li:last-child {
border: none;
}
.ul .li {
overflow: hidden;
display: flex;
padding: 40rpx 0;
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: space-between;
border-bottom: 1px solid #f1f1f1 !important;
}
.ul .li .font {
overflow: hidden;
width: 365rpx;
}
.ul .li .font .p {
font-size: 32rpx;
color: #333333;
line-height: 42rpx;
display: block;
margin-bottom: 34rpx;
}
.ul .li .font .span {
display: block;
font-size: 26rpx;
color: #9a9ca0;
}
.ul .li .fontwenzi {
overflow: hidden;
width: 100%;
}
.ul .li .fontwenzi .title {
font-size: 33rpx;
color: #333333;
line-height: 42rpx;
display: block;
margin-bottom: 34rpx;
}
.ul .li .fontwenzi .info {
font-size: 26rpx;
color: #8c8c8c;
line-height: 42rpx;
display: block;
margin-bottom: 34rpx;
}
.ul .li .fontwenzi .span {
display: block;
font-size: 26rpx;
color: #9a9ca0;
}
.ul .li .pic {
overflow: hidden;
width: 260rpx;
border-radius: 20rpx;
}
.ul .li .pic image {
display: block;
width: 100%;
}
</style>
边栏推荐
- String (Analog
- TIPC Service and Topology Tracking4
- 主键策略问题
- JVM garbage collector
- 【深入浅出玩转FPGA学习4----漫谈状态机设计】
- Implement custom drawer component in quick application
- The working day of the month is calculated from the 1st day of each month
- [in simple terms, play with FPGA learning 3 ----- basic grammar]
- ImportError: cannot import name ‘Digraph‘ from ‘graphviz‘
- 函数式接口和方法引用
猜你喜欢
Matlab processing of distance measurement of experimental electron microscope
TIPC Cluster5
ImportError: cannot import name ‘Digraph‘ from ‘graphviz‘
实验电镜距离测量之Matlab处理
Iii. Système de démarrage et d'horloge à puce
二叉树专题--洛谷 P1229 遍历问题（乘法原理 已知前、后序遍历求中序遍历个数）
How to transfer event objects and user-defined parameters simultaneously in Huawei express applications
2022 love analysis · panoramic report of digital manufacturers of state-owned enterprises
JVM之垃圾回收器
ctf 记录
随机推荐
The difference between SQL left join main table restrictions written after on and where
Nodejs+express+mysql simple blog building
QT学习日记8——资源文件添加
sql left join 主表限制条件写在on后面和写在where后面的区别
JVM之垃圾回收器
MTK full dump grab
Huawei game failed to initialize init with error code 907135000
【云原生】2.5 Kubernetes 核心实战（下）
TIPC Cluster5
TIPC介绍1
二叉树专题--【深基16.例7】普通二叉树（简化版）（multiset 求前驱 后继 哨兵法）
PCL projection point cloud
二叉树专题--AcWing 19. 二叉树的下一个节点（找树中节点的后继）
通过券商经理的开户二维码开股票账户安全吗？还是去证券公司开户安全？
Pit of the start attribute of enumrate
Primary key policy problem
Jenkins installation
从攻击面视角，看信创零信任方案实践
Luogu p5536 [xr-3] core city (greed + tree DP looking for the center of the tree)
TIPC Cluster5