原生js实现瀑布流微信小程序使用左右栏实现瀑布流

时间：2023-04-05 00:37:39 HTML5

用css实现瀑布流是不实用的，因为css实现的瀑布流是按列排列的。这里记录下使用js实现瀑布流，在微信小程序中使用左右栏实现瀑布流1.效果图2.原生js实现瀑布流html文件

scrollTopSpace+clientHeight){返回true;}}/*获取子节点的所有内容*/functiongetChildElement(parentElement,content){/*存储元素信息*/letelementArray=[];/*获取父元素下的所有节点信息*/letallElement=parentElement.getElementsByTagName('*');让长度=allElement.length;for(leti=0;i{{item.title}}{{item.title}}<imagesrc="http://boweisou.oss-cn-shenzhen.aliyuncs.com/images/0/2018/11/ZBtqujbbcGjBDgjt0bbJqbTuGqq0z8.png">wxss文件页面{background:#f6f6f6;}/*最外层*/.cateCommodity{display:flex;填充：20rpx28rpx8rpx；框大小：边框框；font-size:28rpx;}/*左右两个容器*/.leftContainer{display:flex;右边距：22rpx；flex-direction:column;}.rightContainer{display:flex;flex-direction:column;}/*图像容器*/.cateItem{margin-bottom:20rpx;}.item{padding:20rpx22rpx;宽度：335rpx；框大小：边框框；背景：#fff；border-radius:6rpx;}.itemImg{margin-bottom:14rpx;宽度：100%；垂直对齐：中间；border-radius:6rpx;}.title{display:-webkit-box;溢出：隐藏；-webkit-line-clamp:2;-webkit-box-orient：垂直；line-height:1.5;}/*返回顶部*/.skipTop{position:fixed;底部：30rpx；右：20rpx；宽度：90rpx；height:90rpx;}.skipTopimage{宽度:100%;高度：100%；vertical-align:middle;}jsfilePage({data:{imageArray:[{id:1,src:'../../images/avatar.jpeg',title:'现代新中式创意陶瓷简约装饰客厅家居玄关软装家居酒柜盘'},{id:1,src:'../../images/avatar3.jpg',title:'秋冬新款2018休闲运动装套装女士韩版金丝绒卫衣plus加厚摇粒绒两件套'},{id:1,src:'../../images/avatar4.jpeg',title:'女童床上用品四件套公主房1.2m床上用品纯棉女孩1.8儿童床单三件套1.5'},{id:1,src:'../../images/avatar7.jpg',title:'婴儿床圆床蚊帐落地式婴儿椭圆床蚊帐支架式儿童床蚊帐BB床小蚊帐'},{id:1,src:'../../images/avatar9.jpeg',title:'包邮动感158T速滑旱冰鞋赛车鞋高端碳纤维shoesfixedsizeprofessionalcustomization'},{id:1,src:'../../images/logo7.jpg',title:'InfantonFloorCribMosquitoNetwithHolder儿童床蚊帐婴儿蚊帐婴儿蚊帐'},{id:1,src:'../../images/logo6.jpg',title:'老A轮滑米高sebahl碳纤维版SEBAHLCARBON平底鞋刹车鞋全能鞋'},{id:1,src:'../../images/logo.jpeg',title:'洋洋发代sandro17秋冬一粒扣羊毛长大衣大衣EKINM9575H'},],showTopImage:false,},onPageScroll(event){/*使用两个条件来防止重复setData操作*/if(event.scrollTop>300&&this.data.showTopImage==false){this.setData({showTopImage:true})}elseif(event.scrollTop<300&&this.data.showTopImage==true){这个。setData({showTopImage:false})}},skipTop(){/*返回顶部*/wx.pageScrollTo({scrollTop:0,duration:300});this.setData({showTopImage:false});},onReachBottom:function(){lettemporaryArray=this.data.imageArray;temporaryArray.push(...this.data.imageArray);this.setData({imageArray:temporaryArray})},})实现瀑布流的左右两列其实就是同一个数组渲染了两次，但是隐藏了一半。我正在努力学习。如果对你的学习有帮助，请留下你的印记（点赞^_^）微信小程序超购物车后实现单行和多行带省略号的文本及父子组件传值及calc注意事项

上一篇：为需要在SAPFioriLaunchpad中执行的SAPGUI事务代码配置系统别名

下一篇：如何在没有InternetExplorer的情况下在Delphi中将报告导出到DropBox(OAuth2.0)

原生js实现瀑布流微信小程序使用左右栏实现瀑布流相关文章