筷子
筷子
  • 发布:2019-05-05 23:28
  • 更新:2020-07-14 16:52
  • 阅读:13268

uniapp下拉刷新问题

分类:uni-app

遇到了一个问题,已经找到原因,但是还没有解决思路,求教大神帮忙看看。。
问题说明:

在首页布局中分为 顶部导航栏+Swiper组件+底部导航栏。。

Swiper组件占用除开顶部导航栏和底部导航栏的所有剩余高度

如果swiper里面没有数据,可以正常使用下拉刷新,但是swiper里面填充满了数据,就不能使用下拉刷新了。。

这时把swiper重新布局,给定一个值,不占用所有的空白空间,这个时候下拉swiper下方的空白处可以监听到下拉刷新事件。

总结:swiper组件所占区域内不能使用下拉刷新。

难点:有什么办法可以在swiper区域内也可以监听到下拉刷新事件?

贴下代码:

<template>  
    <view>  
        <view class="uni-tab-bar">  
            <scroll-view scroll-x class="uni-swiper-tab">  
                <block v-for="(item,index) in items" :key="index">  
                    <view class="swiper-tab-list" :class="{active : index == itemId}" @tap="tabtab(index)">  
                        {{item.name}}{{item.id}}  
                    </view>  
                </block>  
            </scroll-view>  
        </view>   
        <view class="uni-tab-bar">  
            <swiper class="swiper-box" :style="{height:swiperHeight+'px'}" :current="itemId" @change="swiperChange">  
                <!-- 循环瀑布流布局 -->  
                <block v-for="(v,k) in imglist" :key="k">  
                    <swiper-item>  
                        <scroll-view scroll-y class="list" @scrolltolower="loadmore(itemId)">  
                            <img-list :items="v.list"></img-list>  
                            <load-more :loadtext="v.loadtext"></load-more>  
                        </scroll-view>  
                    </swiper-item>  
                </block>  
            </swiper>     
        </view>  
    </view>  
</template>  

<script>  
    import imgList from '../../components/img-list.vue'  
    import loadMore from '../../components/load-more.vue'  

    export default {  
        components: {  
            imgList,  
            loadMore  
        },  
        data() {  
            return {  
                imglist: [  
                    {  
                        loadtext : "上拉加载更多",  
                        count:0,  
                        list:[],  
                    },  
                    {  
                        loadtext : "上拉加载更多",  
                        count:0,  
                        list:[]  
                    },                    
                    {  
                        loadtext : "上拉加载更多",  
                        count:0,  
                        list:[]  
                    }  
                ],  
                itemId:'0',//选中的tabbar索引  
                swiperHeight:0,//滑块区域  
                items:[//tabbar内容  
                    {  
                        name:'最新',id:'new'  
                    },{  
                        name:'热门',id:'hot'  
                    },{  
                        name:'关注',id:'like'  
                    }  
                ]  
            }  
        },  
        methods: {  
            //tabbar点击事件  
            tabtab(id){  
                this.itemId=id;  
            },  
            //滑块滑动事件  
            swiperChange(e){  
                this.itemId=e.detail.current;  
            },  
            // 上拉加载  
            loadmore(i){  
                // var res = this.webapi( 'video/aaa' ,{count:this.imglist[i]['count']});  
                // console.log(res);  
                if(this.imglist[i]['loadtext']!=='上拉加载更多' || this.imglist[i]['loadtext']=='没有更多数据了'  ){return ;}  
                this.imglist[i]['loadtext']='加载中.....';//修改状态  
                uni.request({  
                    url: this.V_apiurl + "video/index",   
                    header:{  
                        'Content-type':'application/x-www-form-urlencoded'  
                    },  
                    data: {  
                        count:this.imglist[i].count,  
                    },  
                    method:'POST',  
                    success: (res) => {  
                        this.imglist[i].loadtext='上拉加载更多';//关闭加载状态  
                        if(res.data.length<1){  
                            this.imglist[i].loadtext='没有更多数据了';//没有更多数据了  
                            return;  
                        }  
                        this.imglist[i].count+=res.data.length;  
                        res.data.forEach(v=>{  
                            this.imglist[i].list.push(v);  
                        });   
                        console.log(res);  
                    }  
                });  
            },  
            //下拉刷新  
            getnew(i){  
                uni.request({  
                    url:this.V_apiurl+"video/index",  
                    header:{'Content-type':'application/x-www-form-urlencoded'},  
                    data: {  
                        'isnew':1,          //是否刷新  
                        'index':i,//当前索引  
                    },  
                    method:'POST',  
                    success: (res) => {  
                        this.imglist[i].count=res.data.length;  
                        this.imglist[i].list=res.data;  
                        this.imglist[i].loadtext="上拉加载更多";  
                    }  
                }),  
                uni.stopPullDownRefresh()//关闭下拉刷新  
            }  

        },  
        onLoad() {  
            //获取滑块区域高度  
            uni.getSystemInfo({  
                success: (res) => {  
                    let height=res.windowHeight-uni.upx2px(100);  
                    this.swiperHeight=height;  
                }  
            });  
            this.loadmore(0);//开启默认加载  
        },  

        onPullDownRefresh() {  
            console.log('fff');  
            this.getnew(this.itemId);  
        }  

    }  
</script>  

<style>  
    .swiper-tab-list{  
        color: #969696;  
        font-weight: bold;  
        width: 33%;  
    }  
    .uni-tab-bar .active{  
        color: #09BB07;  
    }  

</style>  
2019-05-05 23:28 负责人:无 分享
已邀请:
写代码的产品兔

写代码的产品兔

swiper组件所占区域内不能使用下拉刷新实际应该不是因为swiper组件不能下拉刷新刷新而是由scroll-view组件造成的。
官方有写到:

scroll-view是区域滚动,不会触发页面滚动,无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。  
若要使用下拉刷新,建议使用页面的滚动,而不是 scroll-view 。插件市场有前端模拟的下拉刷新,但性能不佳。

我提供两个方案题主可以试试看:
1 使用页面滚动,不用scroll-view,然后顶部导航栏position设置成fixed,然后再补一个同样高度的空白view。
2 仍然使用scroll-view,然后使用@scrolltoupper(滚动到顶部/左边,会触发 scrolltoupper 事件),upper-threshold设置成-100或者自己定一个数负数就行。这里需要注意的是要加个参数表明是在下拉刷新刷新状态还是非下拉刷新状态,在请求数据的时候判断如果是下拉刷新状态就直接return;跳出不执行以避免重复加载数据。因为在下拉的过程中会多次触发@scrolltoupper事件。

  • coderLsk

    用页面滚动只能往下翻,就回不去了,因为只要手指往下滑就会触发下拉刷新。。。

    2021-11-17 10:12

筷子

筷子 (作者) - 90后

没有人懂这个的吗?

  • 9***@qq.com

    怎么解决的我也遇到了。

    2021-06-01 15:43

香蕉不是笨啦啦

香蕉不是笨啦啦 - 哈哈哈

swiper-item里面用scroll-view 然后用scroll-view 自带的触底事件

握瑾怀瑜

握瑾怀瑜

我跟你遇到一样的问题,我是只保留上面的tabbar,下面用的上拉加载更多

        onReachBottom() {  
            // 页面上拉触底事件的处理函数  
            if (this.showLoadMore) {  
                // 是否可以查看更多  
                this.page += 1;  
                this.reload = false; // 是否是刷新,否  
                this.getList();  
            } else {  
                return;  
            }  
        },

不过我这边遇到一个问题,下拉刷新时,刷新的loading框跑到tabbar上面去了,不知你可遇到
https://ask.dcloud.net.cn/question/70324
官方的demo上没有加下拉刷新,我加了以后也是这样

4***@qq.com

4***@qq.com

楼主解决了吗?做了一个类似抖音的项目也是无法触发下拉刷新

  • 握瑾怀瑜

    如果是原生的tabbar,下拉刷新的样式可以设置成circle

    2019-08-06 16:02

2***@qq.com

2***@qq.com - 0.0

scroll-view 有监听到顶部的方法 @scrolltoupper

秦少游

秦少游 - 秦少游

scroll view的高度固定写死就可以了

该问题目前已经被锁定, 无法添加新回复