小程序如何实现两栏瀑布流效果-创新互联
这篇文章主要介绍了小程序如何实现两栏瀑布流效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联服务项目包括江永网站建设、江永网站制作、江永网页制作以及江永网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,江永网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到江永省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局,即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次放 入到高度最低的那一栏。
所谓简单,是指只考虑图片,图片之外的其他元素高度固定,不在考虑范围内。
说一下基本的实现思路:
1、加载列表数据
2、在一个隐藏的view中加载图片,通过image组件的bindload获取图片的实际宽高并存储
3、等所有图片加载完成后遍历列表,将图片插入到高度低的那一栏,同时更新该栏高度
我也考虑过在第二步bindload获取到宽高后就直接插入到栏位中,但是会出现小的图片先加载完先出现到页面中,虽然瀑布流不是普通的列表那样的排序,但是也不能小的图片在上面这样太乱顺序,所以就改成了获取宽高先存储,等所有图片加载完成后再往页面上渲染。
来看看实际的代码
不需要渲染到wxml中的数据,我放到了jsData中,主要是两栏的高度和是否在加载数据的标记。
tempPics是第一次加载的数据,临时存放,用于加载图片宽高
columns是两个栏位的实际展示数据
jsData: { columnsHeight: [0, 0], isLoading: false }, data: { columns: [ [], [] ], tempPics: [] }
1、加载列表数据
这一步没什么好说的,主要是触发方式,我的代码里是放在页面加载以及拉大页面底部时触发
onLoad: function() { this.loadData() }, onReachBottom: function() { this.loadData() }
加载后将列表数据存到tempPics中,用于页面加载获取宽高
2、在一个隐藏的view中加载图片,通过image组件的bindload获取图片的实际宽高并存储
主要是image组件的bindload来获取实际宽高,这里还增加了binderror,防止出现图片加载出错的时候卡死
loadPic: function(e) { var that = this, data = that.data, tempPics = data.tempPics, index = e.currentTarget.dataset.index if (tempPics[index]) { //以750为宽度算出相对应的高度 tempPics[index].height = e.detail.height * 750 / e.detail.width tempPics[index].isLoad = true } that.setData({ tempPics: tempPics }, function() { that.finLoadPic() }) }
获取到宽高后,以750为宽度计算出相对应的高度并存储,然后增加一个加载完成的标记。加载出错后就强制高度为750,这样展示的时候就是一个正方形。
单个图片加载完成并存储后调用finLoadPic方法来判断所有图片是否都加载完成。
遍历列表,只要有一个图片没有加载完成的标记,就判断为没有加载完成。
加载完成后进入下一步。
finLoadPic: function() { var that = this, data = that.data, tempPics = data.tempPics, length = tempPics.length, fin = true for (var i = 0; i < length; i++) { if (!tempPics[i].isLoad) { fin = false break } } if (fin) { wx.hideLoading() if (that.jsData.isLoading) { that.jsData.isLoading = false that.renderPage() } } }
3、等所有图片加载完成后遍历列表,将图片插入到高度低的那一栏,同时更新该栏高度
这里需要再便利一遍列表,根据当前栏位的高度情况,将图片插入到高度底的那一栏,同时把这一栏高度加上当前图片的高度(不是实际高度,是上一步以750为宽度算出来的高度)
renderPage: function() { var that = this, data = that.data, columns = data.columns, tempPics = data.tempPics, length = tempPics.length, columnsHeight = that.jsData.columnsHeight, index = 0 for (var i = 0; i < length; i++) { index = columnsHeight[1] < columnsHeight[0] ? 1 : 0 columns[index].push(tempPics[i]) columnsHeight[index] += tempPics[i].height } that.setData({ columns: columns, tempPics: [] }) that.jsData.columnsHeight = columnsHeight }
在wxml中展示的时候image组件的mode要使用widthFix,同时wxss中图片的高度和宽度一样,这样加载出错的图片可以正方形展示
11月21日增加:
根据网友@杨泉的建议,也尝试了使用wx.getImageInfo来获取图片的宽高(点击查看具体代码),代码也精简了很多。但是实际比较下来速度要比用image组件慢,初步推测原因是wx.getImageInfo会返回本地路径,多了写本地临时文件的时间
ps:用到瀑布流的地方,最好能后端直接返回图片的宽高,省去小程序端获取宽高的麻烦
感谢你能够认真阅读完这篇文章,希望小编分享的“小程序如何实现两栏瀑布流效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联成都网站设计公司,关注创新互联成都网站设计公司行业资讯频道,更多相关知识等着你来学习!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页名称:小程序如何实现两栏瀑布流效果-创新互联
文章链接:http://myzitong.com/article/dceoip.html