uniapp使用scroll-view下拉刷新无法取消的坑及解决_Javascript

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

在做uniapp的时候需要用到tap页但是uview的基础tap页是不支持左右滑动的所以使用了tap-swiper组件

但是这个组件必须包裹一个scroll-view 包裹后uniapp自带的下拉刷新就没了必须使用scroll-view自带的下拉刷新才行

但是做的时候出现了一个问题 scroll-view自带的下拉刷新刷新后无法取消那个动画我在网上也找了很多都没有找到一个好的解决方案

后来就自己搞出来了虽然性能不太好但是还是可以用的

先说下思路

仅供参考

tab-swiper里的swiper-item会遍历一个数组数组代表着有多少个tab页 uview有实例我们这个数组可以这么写

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

然后当我们触发下拉刷新的时候我们把这个数组给置空就比如这样

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

然后我们会在里面的scroll-view里写一条属性v-if='item.length' 意思就是这个遍历后的数组里面有值得话才显示没值得话就不显示

我们下拉刷新置空后scroll-view就不会显示了这样的话下拉刷新的那个动画自然也就没了也就停止了下拉刷新

然后我们下拉后当然要调用接口获取数据了我们获取数据并且赋值完后再把list给恢复list: [[1], [1], [1]],

这样的话每次触发下拉刷新的时候就会因为list情空而停止(可以使用定时器来控制停止的时间)

然后获取数据的时候再给他恢复成本来的状态即可

代码如下仅供参考

<template>
  <view class="container">
    <view class="header">
      <u-search
        bg-color="#fff"
        placeholder="请输入搜索内容"
        :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">
            <!-- 可领取 -->
            <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: '可领取'
          },
          {
            name: '治理中'
          },
          {
            name: '已完成'
          }
        ],
        page: 1,
        keyword: '',
        status: 'loadmore',
        icontype: 'flower',
        loadtext: {
          loadmore: '轻轻上拉',
          loading: '努力加载中',
          nomore: '实在没有了'
        },
        sendlist: [],
        getsendlist: [],
        current: 0,
        swipercurrent: 0
      }
    },
    onload() {
      // console.log('触发')
      // this.getdata()
    },
    onshow() {
      console.log('触发')
      this.page = 1
      this.sendlist = []
      this.getsendlist = []
      this.getdata()
    },

    methods: {
      // =================  下拉刷新 =================
      async refresherrefresh(a) {
        //初始化数据
        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 = []
      },
      // =================  获取数据 =================
      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})`
            })
          }
        })
        // +++++++++  可领取  +++++++++
        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滑动
      transition({ detail: { dx } }) {
        // this.$refs.tabs.setdx(dx)
      },
      // tab动画结束
      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>