uniapp使用scroll-view下拉刷新無法取消的坑及解決

更新時(shí)間：2024年05月24日 09:40:49 作者：haosicx

這篇文章主要介紹了uniapp使用scroll-view下拉刷新無法取消的坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

使用scroll-view下拉刷新無法取消的坑

在做uniapp的時(shí)候需要用到tap頁但是uView的基礎(chǔ)tap頁是不支持左右滑動(dòng)的所以使用了tap-swiper組件

但是這個(gè)組件必須包裹一個(gè)scroll-view 包裹后uniapp自帶的下拉刷新就沒了必須使用scroll-view自帶的下拉刷新才行

但是做的時(shí)候出現(xiàn)了一個(gè)問題 scroll-view自帶的下拉刷新刷新后無法取消那個(gè)動(dòng)畫我在網(wǎng)上也找了很多都沒有找到一個(gè)好的解決方案

后來就自己搞出來了雖然性能不太好但是還是可以用的

先說下思路

僅供參考

tab-swiper里的swiper-item會(huì)遍歷一個(gè)數(shù)組數(shù)組代表著有多少個(gè)tab頁 uView有實(shí)例我們這個(gè)數(shù)組可以這么寫

 <swiper-item
    class="swiper-item"
    v-for="(item, index) in list"
    :key="index"
  >
  // ...里面的東西暫時(shí)不用管
 <swiper-item />
 data(){
    return {
         list: [[1], [1], [1]],
    }
 }

然后當(dāng)我們觸發(fā)下拉刷新的時(shí)候我們把這個(gè)數(shù)組給置空就比如這樣

this.list = [[], [], []]

然后我們會(huì)在里面的scroll-view里寫一條屬性v-if='item.length' 意思就是這個(gè)遍歷后的數(shù)組里面有值得話才顯示沒值得話就不顯示

我們下拉刷新置空后scroll-view就不會(huì)顯示了這樣的話下拉刷新的那個(gè)動(dòng)畫自然也就沒了也就停止了下拉刷新

然后我們下拉后當(dāng)然要調(diào)用接口獲取數(shù)據(jù)了我們獲取數(shù)據(jù)并且賦值完后再把list給恢復(fù)list: [[1], [1], [1]],

這樣的話每次觸發(fā)下拉刷新的時(shí)候就會(huì)因?yàn)閘ist情空而停止(可以使用定時(shí)器來控制停止的時(shí)間)

然后獲取數(shù)據(jù)的時(shí)候再給他恢復(fù)成本來的狀態(tài)即可

代碼如下僅供參考

<template>
  <view class="container">
    <view class="header">
      <u-search
        bg-color="#fff"
        placeholder="請(qǐng)輸入搜索內(nèi)容"
        :show-action="false"
        v-model="keyword"
        @search="searchChange"
      ></u-search>
    </view>
    <view style="padding-top: 50px">
      <u-tabs-swiper
        ref="tabs"
        active-color="#4FCBA1"
        :is-scroll="false"
        :bold="false"
        :list="tabList"
        :current="current"
        @change="changeTabs"
      >
      </u-tabs-swiper>
    </view>
    <swiper
      class="main"
      :current="swiperCurrent"
      duration="300"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item
        class="swiper-item"
        v-for="(item, index) in list"
        :key="index"
      >
        <scroll-view
          scroll-y
          style="height: 100%; width: 100%"
          @refresherrefresh="refresherrefresh"
          @scrolltolower="scrolltolower"
          refresher-enabled
          v-if="item.length > 0"
        >
          <view class="message-content">
            <!-- 可領(lǐng)取 -->
            <view v-if="current === 0">
              <view
                v-for="(item, index) in getSendList"
                :key="index"
                class="card-v-for"
              >
                <getTesk @fsList="fsList" :data="item" />
              </view>
            </view>
            <!-- 治理中 -->
            <view v-if="current === 1">
              <view
                v-for="(item, index) in sendList"
                :key="index"
                class="card-v-for"
              >
                <govern :data="item" :type="1" />
              </view>
            </view>
            <!-- 已完成 -->
            <view v-if="current === 2">
              <view
                v-for="(item, index) in sendList"
                :key="index"
                class="card-v-for"
              >
                <govern :type="2" :data="item" />
              </view>
            </view>
          </view>
          <view style="padding: 10rpx">
            <u-loadmore
              :status="status"
              :icon-type="iconType"
              :load-text="loadText"
            />
          </view>
        </scroll-view>
        <u-empty v-else mode="list"></u-empty>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  import getTesk from './getTesk.vue'
  import govern from './govern.vue'
  import { Search, getSearch } from '@/api/country/governace'

  export default {
    components: { getTesk, govern },
    data() {
      return {
        list: [[1], [1], [1]],

        tabList: [
          {
            name: '可領(lǐng)取'
          },
          {
            name: '治理中'
          },
          {
            name: '已完成'
          }
        ],
        page: 1,
        keyword: '',
        status: 'loadmore',
        iconType: 'flower',
        loadText: {
          loadmore: '輕輕上拉',
          loading: '努力加載中',
          nomore: '實(shí)在沒有了'
        },
        sendList: [],
        getSendList: [],
        current: 0,
        swiperCurrent: 0
      }
    },
    onLoad() {
      // console.log('觸發(fā)')
      // this.getData()
    },
    onShow() {
      console.log('觸發(fā)')
      this.page = 1
      this.sendList = []
      this.getSendList = []
      this.getData()
    },

    methods: {
      // =================  下拉刷新 =================
      async refresherrefresh(a) {
        //初始化數(shù)據(jù)
        this.page = 1
        this.sendList = []
        this.getSendList = []
        this.list = [[], [], []]
        await this.getData()
      },
      // =================  上啦加載 =================
      scrolltolower() {
        this.status = 'loading'

        this.page = this.page + 1

        setTimeout(() => {
          this.getData()
          this.status = 'nomore'
        }, 1000)
      },
      // =================  搜索 =================
      searchChange() {
        this.page = 1
        this.sendList = []
        this.getData()
        this.getSendList = []
      },
      // =================  獲取數(shù)據(jù) =================
      getData(val) {
        // +++++++++  重置刷新  +++++++++
        const params = {
          page: this.page,
          limit: 5,
          governState: 1,
          title: this.keyword
        }
        if (this.current === 1) {
          params.governState = 1
        } else if (this.current === 2) {
          params.governState = 2
        }
        // +++++++++  治理中 / 已完成  +++++++++
        Search(params).then((res) => {
          if (res.data.records.length || !this.sendList.length) {
            this.status = 'nomore'
          }
          this.sendList = this.sendList.concat(res.data.records)
          if (+this.current === 1 || +this.current === 0) {
            this.$set(this.tabList, 1, {
              name: `治理中 (${res.data.total})`
            })
          }
        })
        // +++++++++  可領(lǐng)取  +++++++++
        const obj = {
          page: this.page,
          limit: 5,
          governState: '',
          title: this.keyword
        }
        getSearch(obj).then((res) => {
          if (res.data.records.length || !this.getSendList.length) {
            this.status = 'nomore'
          }
          this.getSendList = this.getSendList.concat(res.data.records)
        })
        // }
        // +++++++++  控制刷新  +++++++++
        setTimeout(() => {
          this.list = [[1], [1], [1]]
        }, 100)
      },
      // =================  刷新列表 =================
      fsList() {
        this.page = 1
        this.getSendList = []
        this.sendList = []
        this.getData()
      },
      // =================  切換tabs頁 =================
      changeTabs(index) {
        this.swiperCurrent = index
        this.current = index
      },
      // tab滑動(dòng)
      transition({ detail: { dx } }) {
        // this.$refs.tabs.setDx(dx)
      },
      // tab動(dòng)畫結(jié)束
      animationfinish({ detail: { current } }) {
        this.$refs.tabs.setFinishCurrent(current)
        this.swiperCurrent = current
        this.current = current
      }
    },
    watch: {
      current: {
        handler() {
          this.page = 1
          this.sendList = []
          this.getSendList = []
          this.getData()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .header {
    z-index: 10;
    padding: 14rpx 24rpx;
    position: fixed;
    width: 100%;
    background: #f5f5f5;
  }
  .message-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 28rpx 40rpx;
    margin-bottom: 20rpx;
    background: #fff;
    color: #333;
    .title {
      font-size: 28rpx;
      font-weight: bold;
      padding-bottom: 24rpx;
    }
    .msg-content {
      display: flex;
      padding-bottom: 24rpx;
      justify-content: space-between;
    }
    .msg-review {
      text-align: center;
      color: #4fcca0;
      font-size: 28rpx;
      border-top: 1rpx solid #eee;
      padding: 24rpx 0 0 0;
    }
  }
  .footer {
    padding: 60rpx 0;
    display: flex;
    align-items: center;
    background: #fff;
    position: fixed;
    bottom: 0;
    z-index: 999;
  }
  .message-content {
    padding: 0rpx 0 20rpx 0;
    // height: 100%;
  }

  .card-v-for {
    margin-bottom: 30rpx;
  }
</style>