huihui6677889
huihui6677889
  • 发布:2023-06-28 18:00
  • 更新:2023-06-28 18:00
  • 阅读:459

uniapp<scroll-view>的refresherpulling在App端失效

分类:uni-app

组件

<template>  
  <view class="list-container">  
    <scroll-view  
      id="list-view"  
      show-scrollbar="true"  
      style="height: 100%"  
      scroll-y="true"  
      scroll-with-animation  
      :scroll-into-view="data.topItem"  
      :refresher-enabled="allowRefresh"  
      :refresher-triggered="refreshing"  
      :refresher-threshold="45"  
      refresher-background="white"  
      @refresherpulling="onPulling"  
      @refresherrefresh="onRefresh"  
      @refresherrestore="onRestore"  
      @refresherabort="onAbort"  
      @scroll="onScroll"  
    >  
      <!-- 返回顶部的定位标签 -->  
      <view id="top"></view>  
      <!-- 列表项 -->  
      <view v-for="item in list" :key="item.id">  
        <slot name="item" :item="item"></slot>  
      </view>  
      <view v-if="hasMore && loadingMore && list.length !== 0" style="width: 100%; text-align: center">  
        loading......  
      </view>  
      <view v-if="!hasMore" style="width: 100%; text-align: center">--END--</view>  
    </scroll-view>  
    <image v-if="data.scroll_top >= 1200" src="@/static/backTop.png" class="backTop" @click="handleBackTop"> </image>  
  </view>  
</template>  

<script setup lang="ts">  
// import { onPullDownRefresh } from '@dcloudio/uni-app'  
import { reactive, ref, withDefaults, watch, toRefs, computed, getCurrentInstance, onMounted } from 'vue'  
// import { onLoad } from '@dcloudio/uni-app'  

const props = withDefaults(  
  defineProps<{  
    list: Array<any>  
    hasMore: boolean  
    refreshEnabled?: boolean  
  }>(),  
  {  
    refreshEnabled: true,  
  }  
)  
const { list, hasMore, refreshEnabled } = toRefs(props)  
const emits = defineEmits(['initList', 'loadMore'])  
const { proxy } = getCurrentInstance()  

const refreshing = ref<boolean>(false)  
const loadingMore = ref<boolean>(false)  
const listViewHeight = ref<number>(0)  
const inited = ref<boolean>(false)  
const data = reactive({ scroll_top: 0, topItem: '' })  

watch(  
  list,  
  () => {  
    inited.value = true  
  },  
  { deep: true }  
)  

const allowRefresh = computed(() => {  
  return inited.value && refreshEnabled  
})  

// 自定义下拉刷新控件被下拉  
const onPulling = (e) => {  
  if (e.detail.dy < 0) return // 防止上滑页面也触发下拉  
  if (refreshing.value) return  
  refreshing.value = true  
}  

// 自定义下拉刷新被触发  
const onRefresh = () => {  
  if (!refreshing.value) return  
  emits('initList')  
  setTimeout(() => {  
    refreshing.value = false  
  }, 2000)  
}  

// 自定义下拉刷新被复位  
const onRestore = () => {  
  refreshing.value = false // 需要重置  
}  

// 自定义下拉刷新被中止  
const onAbort = () => {  
  refreshing.value = false  
}  

const loadMore = () => {  
  if (loadingMore.value) return  
  loadingMore.value = true  
  emits('loadMore')  
  setTimeout(() => {  
    loadingMore.value = false  
  }, 300) // 加载完数据后将 loadingMore 设置为 false  
}  

const onScroll = (e) => {  
  const { scrollTop, scrollHeight } = e.detail  
  data.scroll_top = scrollTop  
  if (data.scroll_top < 1200) {  
    data.topItem = ''  
  }  
  // console.log('onScroll', scrollHeight - listViewHeight.value - scrollTop)  
  if (scrollHeight - listViewHeight.value - scrollTop < 60 && hasMore.value) {  
    !loadingMore.value && loadMore()  
  }  
}  

onMounted(() => {  
  const query = uni.createSelectorQuery().in(proxy)  
  query.select('#list-view').boundingClientRect((nodeInfo) => {  
    listViewHeight.value = nodeInfo.height  
  })  
  query.exec()  
  inited.value = true  
})  

const handleBackTop = () => {  
  data.topItem = 'top'  
  // data.scroll_top = 0  
  // let speed = data.scroll_top / 10 // 计算每毫秒减少的数值  
  // let intervalId = setInterval(() => {  
  //   data.scroll_top -= speed // 每毫秒减少 speed  
  //   if (data.scroll_top <= 0) {  
  //     clearInterval(intervalId) // 数字减到0后清除计时器  
  //     data.scroll_top = 0  
  //   }  
  //   // console.log(data.scroll_top)  
  // }, 150)  
}  
// onLoad是小程序生命周期,这里是组件应该用mounted  
// onLoad(() => {  
//   const query = uni.createSelectorQuery().in(proxy)  
//   query.select('#list-view').boundingClientRect((nodeInfo) => {  
//     listViewHeight.value = nodeInfo.height  
//   })  
//   query.exec()  
// })  
// onPullDownRefresh(() => {  
//   console.log(1111)  
// })  
</script>  

<style lang="scss" scoped>  
.list-container {  
  overflow-y: auto;  
  #list-view {  
    height: 100%;  
    -webkit-overflow-scrolling: touch;  
  }  
}  
.backTop {  
  height: 100rpx;  
  width: 100rpx;  
  border-radius: 50%;  
  position: fixed;  
  right: 50rpx;  
  bottom: 100rpx;  
}  
</style>  

使用

    <view class="lawyerLists">  
      <!-- <List :has-more="true" :list="[]"></List> -->  
      <Empty  
        v-if="data.lawyers && data.lawyers.length == 0"  
        :icon-path="QINIU_IMG_URL + '/static/user2/NoSerach.png'"  
        text="暂无内容"  
      ></Empty>  
      <List  
        v-else  
        :list="data.lawyers"  
        :has-more="data.hasMore"  
        @init-list="initList({ ...data.params, cur_page: 1 })"  
        @load-more="loadMore"  
      >  
        <template #item="{ item }">  
          <LawyerCard :item="item" @click="handleJumptoDetail(item)"></LawyerCard>  
        </template>  
      </List>  
    </view>

小程序端一切正常,打包成app后下拉刷新失效

2023-06-28 18:00 负责人:无 分享
已邀请:

要回复问题请先登录注册