范围:深圳亚博app开发,软件定制开发,亚博app软件开发公司,深圳软件外包公司.TEL:3447249690
当前位置:首页 > app小程序

亚博-微信小程序开发瀑布流解决方案

07-03 亚博APP
摘要:微信小法式开辟瀑布流最简单的实现方案,不合用有分页的场景。

网上能搜到的小法式瀑布流解决方案,要末代码复杂、逻辑紊乱,要末实现不了营业功能,所以把项目中的实现方案给大师分享下。

最简单的实现方案,不合用有分页的场景。

这个方案简单的缘由是由于仅仅利用了css的属性。 利用column-count 属性可以指定页面显示的列数,一般瀑布流都是2列,所以可以界说class

.list-masonry { column-count: 2; //2列 column-gap: 20rpx; //列间距 }

留意,瀑布流的卡片需要css属性 display: inline-block; 将卡片设置为 内联元素。image 组件设置缩放模式 mode=widthFix 来连结图片宽高比。

column-count 属性默许是以列的情势来填凑数据的。好比我们有20条数据,1 ~ 10 条数据会展现在左侧第一列,11 ~ 20 条数据会展现在第二列。 假如有分页,再往数组中增添20条数据后,就会酿成 1 ~ 20 条数据会在左侧,21 ~ 40 条数据会展现在右侧。用户体验很是差。 因为 column-fill: balance; 填充属性无效,没法指定填充挨次为行的情势。 所以这类实现方案只能一下加载完所稀有据,不合用在分页。 Component实现瀑布流,功能壮大,滑动流利

经由过程自界说组件,用本身的思绪实现瀑布流。然后在需要瀑布流的处所直接挪用,便利复用。

没有Demo!! 随着我的步调一步一步来,就可以轻松实现。

1.起首建立瀑布流自界说组件文件。

建议在项目根目次建立文件夹component,然后在该目次下建立文件夹WaterFallView,最后在WaterFallView下建立component。(鼠标右键->新建->Component)。

/亚博

2.设计瀑布流的wxml。

瀑布流的布局简单,只有摆布2列。所以在设计UI的时辰,结构很简单。

/

摆布双方,一边一个View。经由过程这两个View 来展现瀑布流的两列。每一个View对应一个数据源,因而可知,这套思绪的重点是这个两个数据源的处置。每一个View中的template 为瀑布流中的卡片,就不介绍了。 跨越两列的瀑布流比力少见,本篇不斟酌,但可用本篇的思绪来实现。

css样式

/

具体实现逻辑

按照上面的 wxml 布局,这个组件的焦点逻辑就是若何把要展现的数据item 放入leftList、rightList这两个数组中。 若何分派数据item?这个简单,我们可以界说2个变量 leftHight、rightHight,来别离记实leftList、rightList数组中图片的高度(可以理解为左侧View、右侧View的高度,其实只是图片的高度,但已知足瀑布流的的需求)。当leftHight 年夜在 rightHight时,把数据放入rightList,并让rightHight叠加数据中图片的高度。当rightHight年夜在 leftHight 时,把数据放入leftList,并让leftHight 叠加数据中图片的高度。

if (leftHight == rightHight) { //第1个item放左侧 leftList.push(tmp); leftHight = leftHight + tmp.itemHeight; } else if (leftHight

瀑布流展现图片的时辰,需要知道图片的宽高,然后按照图片的宽高比来设置 image组件的宽高。所以假如你们的数据没有宽高或宽高比,很难实现瀑布流。固然可以经由过程代码取得图片宽高,但会对机能和用户体验有很年夜影响,不保举这么做。可以和后台同窗筹议下,看若何加上宽高数据。

Component有本身生命周期方式,乃至可以象Page一样,当作一个零丁的页面利用。可以在他的生命周期方式中取得到瀑布流的宽度,和图片的最年夜高度。

/

拿到瀑布流的宽度后,便可以按照图片的宽高比,计较出 image 组件的宽高。

/

在template中,image的宽高需要声明下。单元是px,不是rpx

/

1.利用瀑布流

a. 注册自界说组件

在利用自界说组件的Page的json文件中声明要利用的组件

{

....

usingComponents: {

waterFallView: ../../component/WaterFallView/WaterFallView

}

}

b. 在 wxml 中添加组件,并加上 id

/

相干资讯:微信小法式微信小法式开辟教程

版权保护: 本文由 亚博app开发 原创
转载请保留链接: http://www.jiayuanLi.com

关于我们      深圳亚博app定制开发软件有限公司,自2013年成立以来,为上千家企业提供软件外包、系统软件开发、亚博app开发、微信公众号开发、深圳亚博小程序开发等各种优秀的软件定制开发服务.关键词:软件外包公司、手机软件开发、app制作开发、手机亚博app开发、小程序开发公司【TEL】:3447249690 微信:3447249690 QQ:3447249690
  • 1578文章总数
  • 13访问次数
  • 建站天数