Solve the problem of data blank in the quick sliding page of the uniapp list

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

【z-paging The drop-down refresh 、 Pull on loading 】 High performance , Full platform compatibility . Support virtual list , Support nvue、vue3 - DCloud Plug in market Super simple 、 Low coupling ！ Use wxs+renderjs Realization . Support long list optimization , Support customized pull-down refresh 、 Pull up to load more , Support automatic management of empty data graphs 、 Click back to the top , Support chat paging 、 Local paging , Support internationalization 100+ Item Configuration 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>