请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

互动交流 list如何实现瀑布流

5
回复
103
查看
[复制链接]

1

主题

5

帖子

30

积分

 楼主| 2020-3-11 18:49:41 显示全部楼层 |阅读模式
使用list无法实现瀑布流;
不使用list,可以实现瀑布流,但是没有页面上拉触底事件的处理函数,无法加载新的数据
回复

使用道具 举报

1

主题

5

帖子

30

积分

 楼主| 2020-3-11 19:28:18 显示全部楼层
已实现,把可以实现瀑布流的全部代码放在list里的第一个list-item里
回复

使用道具 举报

2

主题

36

帖子

190

积分

2020-3-15 14:25:10 显示全部楼层
zhanghaixia 发表于 2020-3-11 19:28
已实现,把可以实现瀑布流的全部代码放在list里的第一个list-item里

方便分享下吗。瀑布流内部都是用什么标签操作的
回复

使用道具 举报

1

主题

5

帖子

30

积分

 楼主| 2020-3-17 18:52:31 显示全部楼层
LeftEar 发表于 2020-3-15 14:25
方便分享下吗。瀑布流内部都是用什么标签操作的

代码如下,功能和样式都可以实现,但是性能不太好,下拉到第10页的时候资源不显示了,
<list onscrollbottom="loadMore">
      <list-item type="true-item">
        <div class="video-list">
          <block for="{{(index, video) in videos }}">
            <block if="{{video.position == 0}}">
              <div>
                <svideoItem video="{{ video }}" index="{{ index }}"></svideoItem>
              </div>
            </block>
          </block>
        </div>
        <div class="video-list">
          <block for="{{(index, video) in videos }}">
            <block if="{{video.position == 1}}">
              <div>
                <svideoItem video="{{ video }}" index="{{ index }}"></svideoItem>
              </div>
            </block>
          </block>
        </div>
      </list-item>
      <block if="{{hasMore == 1}}">
        <list-item type="loadMore" class="loadarea">
            <image src="../../../img/1.gif" class='loadpic'></image>
        </list-item>
      </block>
    </list>
回复

使用道具 举报

1

主题

5

帖子

30

积分

 楼主| 2020-3-17 19:09:49 显示全部楼层
zhanghaixia 发表于 2020-3-17 18:52
代码如下,功能和样式都可以实现,但是性能不太好,下拉到第10页的时候资源不显示了,

      

有一篇帖子描述了list实现瀑布流(不理想),可以看下:https://juejin.im/post/5c21e2686fb9a049b41c7e1b
list瀑布流(不理想)
布局:
方案1: list中嵌套两个list-item,list-item中用block循环对应数组中数据。
缺点:
list不支持justify-content样式。
页面出现卡顿。

方案2: div中嵌套两个list,block循环list-item来展示数据。
缺点:
div不能实现页面滚动。
左右list会独立滚动。

方案3: list中设置属性columns:2,list-item显示数据信息。
缺点:
无法区分两侧数据。
每个list-item高度相同。

方案4: list中嵌套一个list-item,list-item中用div分为左右两列列表,div中block循环对应数组中数据。
缺点:
页面卡顿。


回复

使用道具 举报

2

主题

36

帖子

190

积分

2020-3-23 16:11:49 显示全部楼层
zhanghaixia 发表于 2020-3-17 18:52
代码如下,功能和样式都可以实现,但是性能不太好,下拉到第10页的时候资源不显示了,

      

谢谢
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册