heroMan
heroMan
  • 发布:2025-07-16 09:46
  • 更新:2025-07-16 09:57
  • 阅读:41

scroll-view组件下拉刷新UI问题

分类:uni-app
<scroll-view class="list-container" :style="{ 'height': `calc(100vh - ${statusBarHeight + 91}px)` }" scroll-y  
            refresher-enabled :refresher-triggered="refresherTriggered"   
            :show-scrollbar="false"  
            :scroll-top="scrollTop"  
            @scroll="onScroll"  
            @refresherrefresh="onRefresh" @scrolltolower="onLoadMore" refresher-default-style="none">  
            <view slot="refresher" class="refresher">  
                <image :src="refreshIcon" class="refresher_img" />  
            </view>  
</scroll-view>

通过插槽添加下拉刷新功能,但是下拉时,页面能一直下拉到页面底,问题视频见附件。怎么限制这个下拉高度?设置refresher-threshold是解决不了这个问题的。

2025-07-16 09:46 负责人:无 分享
已邀请:
套马杆的套子

套马杆的套子 - 没有解决不了的问题,只有解决不完的问题

参考下我一直在用的

<template>  
    <scroll-view :style="{height: scrollHeight+'px'}"  
                :scroll-y="allow_scroll_y"  
                @scroll="scroll"  
                @scrolltolower="scrolltolower">  
        <view class="refresh-moudle"  
            @touchstart="touchStart($event)"   
            @touchmove="touchMove($event)"   
            @touchend="touchEnd($event)"   
            :style="{transform: 'translate3d(0,' + top + 'px, 0)'}">  
          <view class="pull-refresh">  
            <slot name="pull-refresh">  
              <view class="down-tip" v-if="dropDownState==1">  
                <image v-if="dropDownInfo.downImg" class="down-img" :src="dropDownInfo.downImg"></image>  
                <view class="down-text">{{dropDownInfo.downText}}</view>  
              </view>  
              <view class="up-tip" v-if="dropDownState==2">  
                <image v-if="dropDownInfo.upImg" class="up-img" :src="dropDownInfo.upImg"></image>  
                <view class="up-text">{{dropDownInfo.upText}}</view>  
              </view>  
              <view class="refresh-tip" v-if="dropDownState==3">  
                <image v-if="dropDownInfo.refreshImg" class="refresh-img" :src="dropDownInfo.refreshImg"></image>  
                <view class="refresh-text">{{dropDownInfo.refreshText}}</view>  
              </view>  
            </slot>  
          </view>  
          <slot></slot>  
          <uni-load-more :status="pullupLoadingType"></uni-load-more>  
        </view>  
    </scroll-view>  
</template>  

<script>  
    import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';  
    export default {  
        name: "ygcRefresh",  
        components: {  
            uniLoadMore  
        },  
        //属性  
        props: {  
            pullupLoadingType: {  
                type: String,  
                default: 'more'  
            },  
            scrollHeight:{  
                type:Number,  
                default:500  
            }  
        },  
        data () {  
            return {  
              defaultOffset: 80, // 下拉偏移高度, 如果要改建议相应的修改.releshMoudle的margin-top和.down-tip, .up-tip, .refresh-tip的height  
              top: 0,  
              startY: 0,  
              isDropDown: false, // 是否下拉  
              isRefreshing: false, // 是否正在刷新  
              dropDownState: 1, // 显示1:下拉可以刷新, 2:松开立即刷新, 3:正在刷新数据中...  
              dropDownInfo: {  
                downText: this.$t('ygc-refresh.downText'),  
                downImg: '/static/ygc-refresh/xiangxia.png',  
                upText: this.$t('ygc-refresh.upText'),  
                upImg: '/static/ygc-refresh/xiangxia.png',  
                refreshText: this.$t('ygc-refresh.refreshText'),  
                refreshImg: '/static/ygc-refresh/loading.png'  
              },  
              scrollTop: 0,  
              allow_scroll_y: true ,//1.0.2版新增代码,解决因ios环境下scrollview的scrolltop可下拉为负数带来的体验问题  
              allowTouchMove: true //1.0.6版新增代码,控制是否允许touchMove事件  
            }  
        },  
        //组件生命周期  
        created:function(e){  
        },  
        methods: {  
            scrolltolower() {  
                this.$emit('scrolltolower');  
            },  
            scroll: function(e) {  
                this.$nextTick(function() {  
                    this.scrollTop = e.detail.scrollTop;  
                });  
            },  
            /**  
             * 触摸开始,手指点击屏幕时  
             * @param {object} e Touch 对象包含的属性  
             */  
            touchStart (e) {  
                // console.log('startPageY:',e.changedTouches[0].pageY);  
                this.startY = e.changedTouches[0].pageY;  
                this.startScrollTop = this.scrollTop;  

                this.allowTouchMove = true; //1.0.6版新增代码,控制是否允许touchMove事件  
            },  

            /**  
             * 接触点改变,滑动时  
             * @param {object} e Touch 对象包含的属性  
             */  
            touchMove (e) {  
                //1.0.6版新增代码,控制是否允许touchMove事件  
                if(!this.allowTouchMove) {  
                    return;  
                }  

                //1.0.2版新增代码,解决因ios环境下scrollview的scrolltop可下拉为负数带来的体验问题  
                this.$nextTick(function() {  
                    if(this.scrollTop<0) {  
                        this.allow_scroll_y = false;  
                    } else {  
                        this.allow_scroll_y = true;  
                    }  
                });  

                if(this.scrollTop <= 0) {  
                    if (e.changedTouches[0].pageY > this.startY) {  
                        // 下拉  
                        this.isDropDown = true  
                        if (!this.isRefreshing) {  
                          // 获取拉取的间隔差  当前移动的y点          初始的y点        初始顶部距离  
                          let diff = e.changedTouches[0].pageY - this.startY -  this.startScrollTop;  
                          this.top = Math.pow(diff, 0.8) + (this.dropDownState === 3 ? this.defaultOffset : 0);  
                          if (this.top >= this.defaultOffset) {  
                            // console.log('top:',this.top);  
                            this.dropDownState = 2;  
                            e.preventDefault();  
                          } else {   
                            // console.log('dropDownState = 1');  
                            this.dropDownState = 1;  
                            // 去掉会导致ios无法刷新  
                            e.preventDefault();  
                          }  
                        }  
                    } else {  
                        this.isDropDown = false;  
                        this.dropDownState = 1;  
                    }  
                }  
            },  

            /**  
             * 触摸结束,手指离开屏幕时  
             * @param {object} e Touch 对象包含的属性  
             */  
            touchEnd (e) {  
              //1.0.2版新增代码,解决因ios环境下scrollview的scrolltop可下拉为负数带来的体验问题     
              this.$nextTick(function() {  
                  this.allow_scroll_y = true;  
              });  

              if (this.isDropDown && !this.isRefreshing) {  
                if (this.top >= this.defaultOffset) {  
                  // do refresh  
                  this.isRefreshing = true;  
                  this.refresh();  
                } else {  
                  // cancel refresh  
                  this.isRefreshing = false;  
                  this.isDropDown = false;  
                  this.dropDownState = 1;  
                  this.top = 0;  
                }  
              }  
            },  

            /**  
             * 刷新  
             */  
            refresh () {  
              this.dropDownState = 3;  
              this.top = this.defaultOffset;  
              // 延时1200毫秒结束正在刷新动画,给用户一个刷新的感觉,或者可以直接去掉本组件正在刷新的动画状态,配合官方uni-load-more组件的正在刷新动画  
              this.$emit('onRefresh');  
              setTimeout(() => {  
                this.refreshDone();  
              }, 1200)  

              /****好吧,粗暴点,就是把上面的代码注释掉,用下面的代码*****/  
              // this.$emit('onRefresh');  
              // this.refreshDone();  

            },  

            /**  
             * 刷新完成  
             */  
            refreshDone () {  
              this.isRefreshing = false;  
              this.isDropDown = false;  
              this.dropDownState = 1;  
              this.top = 0;  
            }  
        }  
    }  
</script>  

<!-- Add "scoped" attribute to limit CSS to this component only -->  
<style lang="scss" scoped>  
    $height: 50px;  
    .refresh-moudle {  
        width: 100%;  
        margin-top: -$height;  
        -webkit-overflow-scrolling: touch; /* ios5+ */  
        .pull-refresh {  
            width: 100%;  
            color: #999;  
            transition-duration: 200ms;  
            font-size: 28upx;  
            .down-tip,  
            .up-tip,  
            .refresh-tip {  
                display: flex;  
                align-items: center;  
                justify-content: center;  
                height: $height;  
            }  
            .down-img,  
            .up-img,  
            .refresh-img{  
                width: 50upx;  
                height: 50upx;  
                margin-right: 30upx;  
            }  
            .down-img {  
              transform: rotate(0deg);  
              animation: anticlockwise 0.8s ease;  
            }  
            @keyframes anticlockwise {  
              0% {  
                transform: rotate(-180deg);  
              }  
              100% {  
                transform: rotate(0deg);  
              }  
            }  
            .up-img {  
              transform: rotate(180deg);  
              animation: clockwise 0.8s ease;  
            }  
            @keyframes clockwise {  
              0% {  
                transform: rotate(0deg);  
              }  
              100% {  
                transform: rotate(-180deg);  
              }  
            }  
            .refresh-img {  
              animation: rotating 1.5s linear infinite;  
            }  
            @keyframes rotating {  
              0% {  
                transform: rotate(0deg);  
              }  
              100% {  
                transform: rotate(1turn);  
              }  
            }  
        }  
    }  
    .uni-load-more {  
        display: flex;  
        flex-direction: row;  
        height: 80upx;  
        align-items: center;  
        justify-content: center  
    }  
</style>  
heroMan

heroMan (作者)

加了
.uni-scroll-view-refresher{
max-height: 145px !important;
}
解决一直下拉到底的问题了。
但是回弹没有过度,直接回弹了 效果很不好

要回复问题请先登录注册