瀑布流可以说难度中等吧,主要涉及到几个问题:
布局问题(瀑布就是没了之后自动加载,加载进来的内容的样式问题)
异步数据获取的问题(当你监听scroll的时候,什么时候获取数据,取到的数据解析,处理完成还还要append页面去)
第一次编程要是做这个确实有点难,但是越有难度越有挑战,自己也会越有成就感,建议楼主主要看一下事件机制,ajax就好,把握好css 做起来难度还可以
微信小程序实现瀑布流布局,效果如下:
index.js
index.wxml
index.wxss
waterFlow.js
说明:首先waterfall是weex的原生组件,WEEX的出现让我们可以使用Vue来进行移动端原生应用开发。这里就需要了解什么是weex? Weex是一个可以使用现代化的 Web 技术开发高性能原生应用的框架",这是Weex官网对其的一句很简介明了的定义。Weex是一个可以利用web 前端开发技术来实现Android/ios 原生引用的框架,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API。 1、组件是提供瀑布流布局的核心组件。瀑布流,又称瀑布流式布局是比较流行的一种页面布局,视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动,这种布局还可以不断加载数据块并附加至当前尾部。 2、 <waterfall>只支持 Android 和 iOS,不支持 Web。 3、注意:(个人经验总结)当<waterfall>组件里面出现图片<image>组件时,不允许对image自适应高度是因为weex的css样式布置auto属性。所以在当我们用uniapp开发时,uniapp的mode属性是不能使用的。且weex的image并没有mode属性而是resize属性。所以image的宽高就需要固定,如需保持宽度一致高度适应就需要计算了。