2***@qq.com
2***@qq.com
  • 发布:2023-09-08 17:12
  • 更新:2023-09-08 17:15
  • 阅读:313

nvue下,list中嵌套swiper,swiper内使用waterfall,上拉加载需要拉到顶部,在下拉才能加载,请问问题出在哪里?

分类:nvue

// demo.nvue  
<template>  
    <list ref='list' id="pageId" bounce="false" show-scrollbar="false" fixFreezing="true" loadmoreoffset="2" offset-accuracy="2"  
        @loadmore="loadmore">  
        <cell>  
            <view class="" ref="header">  
                <text style="line-height: 500px;background-color grey;">head</text>  
                <scroll-view class="nav" scroll-x="true" show-scrollbar="false"  
                    @scroll="scrollLeft = $event.detail.scrollLeft">  
                    <text ref="navItem" :class="['text', {active: index === activeIndex}]"  
                        v-for="(value, index) in navList" @click="activeIndex = index">列表{{index}}</text>  
                    <view class="xian" :style="{left: navXianLeft+'px',width: navXianWidth+'px'}"></view>  
                </scroll-view>  
            </view>  
            <swiper class="swiper" :current="activeIndex" :style="{height: swiperHeight+'px'}" @change="change">  
                <swiper-item class="swiperItem" v-for="(value, index) in navList" :key="index">  
                    <demoList ref="demoList" :height="swiperHeight" :index="index" :dataList="dataList"></demoList>  
                </swiper-item>  
            </swiper>  
        </cell>  
    </list>  
</template>  
<script>  
    // #ifdef APP-NVUE  
    const dom = weex.requireModule('dom')  
    // #endif  
    import demoList from '@/components/demoList.nvue'  
    export default {  
        components: {  
            demoList  
        },  
        data() {  
            return {  
                activeIndex: 0,  
                swiperHeight: 0,  
                navList: [],  
                dataList: [],  
                navXianLeft: 0,  
                navXianWidth: 0,  
                scrollLeft: 0  
            }  
        },  

        methods: {  
            loadmore(){  
                console.log('loadMore');  
                this.loadData();  
                setTimeout(() => {    
                                    this.$refs["list"].resetLoadmore();    
                                }, 1000)    
            },  
            change: function(event) {  
                this.activeIndex = event.detail.current;  
                this.xian()  
            },  
            xian: function() { //nav下面的那条线的水平位置调整  
                dom.getComponentRect(this.$refs.navItem[this.activeIndex], (option) => {  
                    this.navXianLeft = option.size.left + this.scrollLeft  
                    this.navXianWidth = option.size.width  
                })  
            },  
            xiding: function(index) { //吸顶  
                dom.getComponentRect(this.$refs.header, (option) => {  
                    this.$refs.demoList[index].qiehuan(option.size.height)  
                })  
            },  

            loadData: function(){  
                dom.getComponentRect(this.$refs.header, (option) => {  
                    this.$refs.demoList[this.activeIndex].setData(new Array(30))  
                })  
            },  
        },  
        onLoad() {  
            this.navList = new Array(10)  
            this.dataList = new Array(30)  
            this.swiperHeight = uni.getSystemInfoSync().windowHeight  
            console.log('高度:',this.swiperHeight)  
        },  
        onReady() {  
            this.$nextTick(() => {})  
            this.xian()  
            this.xiding(0)  
        },  
        watch: {  
            'activeIndex': function(newValue, oldValue) {  
                this.$refs.demoList[oldValue].goTop()  
                this.xiding(newValue)  
            }  
        }  
    }  
</script>  
<style lang="scss">  
    .nav {  
        flex-direction: row;  
        background-color: #FFF;  

        .text {  
            width: 140rpx;  
            text-align: center;  
            font-size: 30rpx;  
            color: rgba(0, 0, 0, 0.5);  
            line-height: 64rpx;  

            &.active {  
                color: #000;  
            }  

        }  

        .xian {  
            position: absolute;  
            bottom: 0;  
            height: 4rpx;  
            background-color: blue;  
        }  
    }  
</style>  

demoList.nvue  
<template>  
    <waterfall ref="list" bounce="true" show-scrollbar="false" column-count="2" fixFreezing="true" :offset-accuracy="2"  
        @scroll="scrollY = $event.contentOffset.y" @loadmore="loadmore">  
        <!-- waterfall 属性说明  
            bounce          =   回弹效果,ios中list嵌套的list(或waterfall),必须设置bounce为true。否则子list无法滚动  
            fixFreezing     =   ios才需要配置的,具体作用不详。官方说要配置  
            show-scrollbar  =   显示滚动条  
    -->  
        <cell v-for="(value, key) in custorm" :key="key">  
            <view v-if="key === 0" ref="goTop"></view>  
            <text class="text">{{index}}=>{{key}}</text>  
        </cell>  
    </waterfall>  
</template>  
<script>  
    // #ifdef APP-NVUE  
    const dom = weex.requireModule('dom')  
    // #endif  
    export default {  
        props: {  
            swiperHeight: Number,  
            index: Number,  
            dataList: Array  
        },  
        mounted() {  
            this.custorm = this.dataList;  
        },  
        data() {  
            return {  
                custorm:[],  
            }  
        },  
        methods: {  
            qiehuan: function(height) {  
                this.$refs.list.setSpecialEffects({  
                    id: 'pageId',  
                    headerHeight: height  
                });  
            },  
            setData:function(data){  
                console.log(data);  
                this.custorm = this.custorm.concat(data);  
                console.log(this.custorm.length);  
            },  
            goTop: function() {  
                if (Math.abs(this.scrollY) > 0) {  
                    dom.scrollToElement(this.$refs.goTop[0], {  
                        animated: false //无动画  
                    })  
                }  
            },  
            loadmore(){  
                // console.log('loadMore');  
            },  
        }  
    }  
</script>  
<style lang="scss">  
    .text {  
        background-color: #ebebeb;  
        margin-left: 12px;  
        margin-right: 12px;  
        margin-top: 12px;  
        padding: 20px;  
        background-color: #fff;  
        border-radius: 5px;  
    }  
</style>
2023-09-08 17:12 负责人:无 分享
已邀请:
2***@qq.com

2***@qq.com (作者)

demo.nvue中以组件的形式加载的demoList,demoList内是waterfall,我的工程源码已上传。这里修改loadmoreoffset依然无法正常的上拉加载,必须把界面拉到导航条为止,再上拉,才能触发加载。

要回复问题请先登录注册