oouuvs
oouuvs
  • 发布:2020-10-20 16:52
  • 更新:2021-03-16 09:20
  • 阅读:972

list水平布局问题,请教

分类:nvue

问题:各位壮汉:在使用list组件的时候,实行上拉加载,如果把循环放在cell中,则可以正常加载下一页数据,但cell我如何调试都不能实现水平布局,水平双列或三列布局。
但如果把循环放在cell下的div中,这时候和vue一样可以正常水平双列三列布局,但上拉只能加载两页或三页,第四页后面的数据就停止加载了,不能实现上拉加载。

请教下,这个循环放在cell中,如何实现row水平布局,还是应该怎么做,调试许久,还是没能成功!
到底如何在list中实现row水平布局呢,请教下各位壮汉。不太适应Nvue,不太熟悉。谢谢!

1、把循环放在cell中,可以实现加载下一页功能(加载下一页功能完全正常),但不能实现row水平双列布局,无论我把flex-direction: row;放在哪里都不能水平布局

<list class="list-ul" scroll-y loadmoreoffset="35" @loadmore="onmore">  

    <cell class="cell-li" v-for="(item,index) in newList" :key="index">  
        <div class="box">  
            <div class="box-view" >  
                <text class="title">{{index}}</text>  
            </div>  
        </div>  
    </cell>  

    <cell class="load">  
        <text class="load-text">{{this.page}}</text>  
    </cell>  
</list>

实现加载下一页功能,但不能水平布局

2、这个循环放在div中,倒是可以实现row水平双列布局,但只能加载两页,三页数据

<list class="list-ul" scroll-y loadmoreoffset="35" @loadmore="onmore">  

    <cell class="cell-li" >  
        <div class="box" style="flex-direction: row;flex-wrap: wrap;justify-content: space-around;">  
            <div class="box-view" v-for="(item,index) in movieList" :key="index">  
                <text class="title">{{index}}</text>  
            </div>  
        </div>  
    </cell>  

    <cell class="load">  
        <text class="load-text">{{this.page}}</text>  
        </cell>  

</list>

不放在cell循环中,放在div中,倒是可以row水平布局,但上拉只能加载三页。

2020-10-20 16:52 负责人:无 分享
已邀请:
以华盛顿你

以华盛顿你 - 你好

循环不卸载cell上, 则在每次获取完服务端数据后使用this.$refs["list"].resetLoadmore(); 即可

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