当前位置：网站首页>Solve the problem of data blank in the quick sliding page of the uniapp list
Solve the problem of data blank in the quick sliding page of the uniapp list
2022-07-02 11:16:00 【Z.RF】
Preface ：
In the near future UNIAPP When developing applets based on architecture , The overall process test of project closure found ,Swiper Sliding nesting Scroll Lists are loaded more often , If users quickly slide the list to load, the page will be blank or directly stuck , Official documents do not recommend the use of scroll Scroll the trend line length list to load ,swiper No need to scroll, The height calculation is not accurate ,list It's not good to trigger the event of sliding to the bottom , Repeatedly optimize various changes , In the end in z-paging This problem is eliminated in customization , The effect and demand almost meet more than 95% .↓↓↓↓↓↓ The following effects
Slide up load drop-down refresh
Pull down refresh slide up load component
https://ext.dcloud.net.cn/plugin?id=3935
<!-- In this file for each tab Render the corresponding list -->
<template>
<view class="content">
<!-- Here for reload Does not automatically scroll to the top , Need to set up auto-clean-list-when-reload and auto-scroll-to-top-when-reload by false, That is to say reload Turn off automatic emptying of the array and automatic scrolling to the top -->
<z-paging
ref="paging"
v-model="dataList"
@query="queryList"
:fixed="false"
empty-view-text=" I'm sorry , There is no relevant data yet ！"
:auto="false"
>
<!-- <view class="banner-view" style="height: 260rpx"> </view> -->
<view class="item" v-for="(item, index) in dataList" :key="index">
<view class="ul">
<!-- All related to the article Yes 2 A pattern 1 One is with thumbnail 1 One is without thumbnails -->
<!-- With thumbnails -->
<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>
<!-- Without thumbnails -->
<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 The bound variable should not be assigned by itself at the end of the paging request ！！！
dataList: [],
firstLoaded: false,
};
},
props: {
// Of the current component index, That is, the current component is swiper Number one of them
tabIndex: {
type: Number,
default: function () {
return 0;
},
},
// Category id
typeid: {
type: Number,
default: function () {
return 0;
},
},
// At present swiper Switch to the number index
currentIndex: {
type: Number,
default: function () {
return 0;
},
},
},
watch: {
currentIndex: {
handler(newVal) {
if (newVal === this.tabIndex) {
// Lazy loading , When sliding to the current item when , To load
if (!this.firstLoaded) {
setTimeout(() => {
this.$refs.paging.reload();
}, 100);
}
}
},
immediate: true,
},
},
methods: {
/**
* Selected events
* @param {*} item
*/
goArticleInfo(item){
this.$emit("goArticleInfo",item);
},
/**
*
* @param {*} page
* @param {*} pageSize
*/
queryList(page, pageSize) {
// This method will be triggered automatically when the component is loaded , Therefore, when the default page is loaded, it will automatically trigger , No manual call required
// there pageNo and pageSize It will be calculated automatically , Send it directly to the server
// Simulate requesting the server to get paging data , Please replace it with your own network request
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: " All ",
});
setTimeout(function () {
uni.hideLoading();
}, 800);
// Pass the requested result array to z-paging
this.$refs.paging.complete(res.list);
} else if (res.code == 400) {
this.$refs.paging.complete(res.list);
} else {
uni.showToast({
title: " Abnormal interface ！",
icon: "none",
duration: 2000,
});
}
});
},
},
};
</script>
<style>
/* Be careful : The parent node needs a fixed height ,z-paging Of height:100% Will take effect */
.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>
Call... Is used in the page
<!-- Slide toggle tab demo ( Standard writing ) -->
<template>
<!-- Use z-paging-swiper For the root node, you can avoid calculating the height -->
<view>
<!-- Imbibition -->
<u-sticky>
<!-- There can only be one root element -->
<view class="sticky" style="background-color: #fff !important">
<uni-nav-bar
statusBar
leftIcon="back"
@clickLeft="goback"
fixed="true"
title=" Medical articles popular science "
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>
<!-- It needs to be fixed on the top without rolling view Put it in slot="top" Of view in -->
<!-- swiper You have to set height:100%, because swiper There is a default height , Only set the height 100% Can be spread all over the page -->
<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 Component's current value , Indicates the currently active tab Options
};
},
mounted() {
uni.showLoading({
title: " Loading ",
});
this.initData();
},
methods: {
getDShow() {
this.show = !this.show;
},
/**
* Jump details
*/
goArticleInfo(item) {
console.log(item);
uni.navigateTo({
url: "/pages/article/info?id=" + item.content_row.id,
});
},
goback() {
uni.navigateBack({
delta: 1,
});
},
/**
* Get a list of popular science articles according to classification
*@param {item} Data of the currently selected tag id/name
*@param {index} Currently selected tag status index
*@param {show} Mask layer status
*/
getTab(item, index) {
console.log(item, index);
this.navbarindex = index;
this.typeid = item.id;
this.show = false;
uni.showLoading({
title: " Loading ",
});
// // When you switch tab Please call the reload Method , Do not call directly ：queryList Method ！！
// this.$refs.paging.reload();
},
//swiper Slip end
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: " Loading ",
});
},
/**
* Initialize to get data
*/
initData() {
var that = this;
that
.$http(" Address of the interface " , "POST", {}, {})
.then((res) => {
if (res.code == 200) {
console.log("z", res);
that.classify_list = res.classify_list;
that.classify_list.unshift({
id: 0,
name: " All ",
});
setTimeout(function () {
uni.hideLoading();
}, 800);
} else {
uni.showToast({
title: " Abnormal interface ！",
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>
边栏推荐
- [AI application] Hikvision ivms-4200 software installation
- 力扣（LeetCode）182. 查找重复的电子邮箱（2022.07.01）
- PowerBI中导出数据方法汇总
- Complement (Mathematical Simulation
- Matlab processing of distance measurement of experimental electron microscope
- Special topic of binary tree -- acwing 3540 Binary search tree building (use the board to build a binary search tree and output the pre -, middle -, and post sequence traversal)
- Calculate the sum of sequences
- spritejs
- 二叉树专题--AcWing 3540. 二叉搜索树建树（实用板子 构建二叉搜索树 并输出前、中、后序遍历）
- LVM operation
猜你喜欢
随机推荐
二叉树专题--AcWing 1589. 构建二叉搜索树
Primary key policy problem
flink二开，实现了个 batch lookup join（附源码）
ImportError: cannot import name ‘Digraph‘ from ‘graphviz‘
The most detailed MySQL installation tutorial
TIPC protocol
[paid promotion] collection of frequently asked questions, recommended list FAQ
Leetcode 182 Find duplicate email (2022.07.01)
QT learning diary 7 - qmainwindow
实验电镜距离测量之Matlab处理
Supermarket (heap overload
二叉树专题--AcWing 3540. 二叉搜索树建树（实用板子 构建二叉搜索树 并输出前、中、后序遍历）
Importerror: impossible d'importer le nom « graph» de « graphviz»
Huawei game failed to initialize init with error code 907135000
ros gazebo相关包的安装
[play with FPGA learning 4 in simple terms ----- talk about state machine design]
三.芯片啟動和時鐘系統
How to implement tabbar title bar with list component
How to use ide to automatically sign and debug Hongmeng application
Special topic of binary tree -- acwing 1497 Traversal of the tree (use post and mid order traversal to build a binary tree)