关于微信小程序简单瀑布流的制作
应业务需要，制作了简单的瀑布流，应用于购物平台。
首先是单个内容组件。考虑到后台计算的消耗，因而将内容里的图片高度采用直接输入。到时传入数据时需注意。
{{goods.detail}}
￥{{goods.price}}
{{convertpayers}}人付款
/* components/showitems/showitems.wxss */
/*外框架*/
.showitems-outerbox{
width: 100%;
border-radius: 6px;
overflow: hidden;
background-color: white;
position: relative;
}
/*视图链接*/
.showitems-nav{
width: 100%;
display: block;
}
/*图片*/
.showitems-img{
width: 100%;
display: block;
}
/*文本域*/
.showitems-text-box{
width: 100%;
height: 70px; /*文本域默认高度为70px,可调整*/
}
/*商品描述*/
.showitems-goods-detail{
height: 35px;
width: calc(100% - 20px);
font-size: 12px;
overflow: hidden;
padding: 5px 10px;
}
/*文本域底部*/
.showitems-text-bottom{
height: 20px;
width: calc(100% - 10px);
padding: 0 5px;
display: flex;
align-items: flex-end;
}
/*商品价格*/
.showitems-goods-price{
font-size: 13px;
color: orangered;
padding: 0 5px 0 0;
}
/*付款人数*/
.showitems-pay-number{
font-size: 10px;
color: gray;
}// components/showitems/showitems.js
Component({
//属性
properties: {
goods:{ //商品信息
type:Object,
value:{
itemsurl:String, //商品链接
picheight:{ //图像高度,默认140px
type:Number,
value:140
},
detail:String, //商品描述
price:Number, //价格
payers:Number, //付款人数
id:Number //商品id
}
},
},
//私有数据
data: {
convertpayers:0, //转化后的购买人数
},
//组件生命周期
lifetimes:{
attached:function(){
var mypayers=this.properties.goods.payers
this.setData({
convertpayers:mypayers>9999?(Math.floor(mypayers/10000)+'万+'):mypayers
})
}
},
//方法
methods: {
}
})接下来是瀑布流组件，注意与外部页面联动。加载的数据需在外部页面JSON化后传入。初始加载20个项目，且每次触底都加载20个项目，但总数尽量不要超过200个，否则可能会卡顿。可简单实现删除一个项目后从外部传入新数据并重新排布序列。组件宽度默认屏幕宽度，可按需嵌套在容器中。最后，在该组件的JSON文件中需引用上述的项目组件，这两个组件有关联。
...
不喜欢
...
不喜欢
到底了~ /* components/waterfall/waterfall.wxss */
/*瀑布流框架*/
.waterfall-outer{
width: 100%;
display: flex;
justify-content: space-between;
}
/*左侧、右侧*/
.waterfall-left , .waterfall-right{
width: calc(50% - 4px); /*中间留8px*/
}
/*项目盒子*/
.waterfall-itemsbox{
width: 100%;
position: relative;
margin-bottom: 8px; /*底部空余8px*/
}
/*三点*/
.waterfall-threedots{
font-size: 16px;
color: gray;
position: absolute;
right: 8px;
bottom: 8px;
height: 18px;
width: 14px;
}
/*蒙层*/
.waterfall-mask{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/*不喜欢*/
.waterfall-mask-unlike{
width: 80px;
height: 20px;
font-size: 14px;
position: absolute;
margin-bottom: 10px;
background-color: white;
text-align: center;
border-radius: 5px;
color: gray;
}
/*瀑布流底部*/
.waterfall-bottom{
height: 30px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
color: gray;
}// components/waterfall/waterfall.js
Component({
//组件属性
properties: {
msg:{ //商品相关信息,在页面JSON化后传入
type:Array,
value:[{
itemsurl:String, //商品链接
picheight:{ //图像高度,默认140px
type:Number,
value:140
},
detail:String, //商品描述
price:Number, //价格
payers:Number, //付款人数
id:Number //商品id
}]
},
loadmore:{ //滚动条触底加载更多,作为页面接口,配合cancelloadmore函数
type:Boolean,
value:false
},
isshowmask:{ //是否显示图片蒙层,作为页面接口,点击空白取消蒙层
type:Boolean,
value:false
},
convey:{ //页面接口,若数据更新完毕传入新的msg序列,则将其设置为true
type:Boolean,
value:false
}
},
//组件内部数据
data: {
leftheight:0, //左侧高度
rightheight:0, //右侧高度
itemsleft:[], //左侧数据集
itemsright:[], //右侧数据集
pageorder:0, //加载页数
istobottom:false, //是否页面到底
maskid:null, //蒙层id
msgarray:[], //动态渲染信息列表
absposition:0, //信息在瀑布流中的绝对位置
},
//生命周期
lifetimes:{
attached:function(){
var leftheight=0
var rightheight=0
var itemsleft=[]
var itemsright=[]
for(let i=0;i<(this.properties.msg.length<=20?this.properties.msg.length:20);i++){ //初始渲染20张图片,不到20张则渲染全部
if(leftheight<=rightheight){
itemsleft.push(this.properties.msg[i])
leftheight += this.properties.msg[i].picheight+70+8 //加上70px文本域高度h和8px边距
}
else{
itemsright.push(this.properties.msg[i])
rightheight += this.properties.msg[i].picheight+70+8
}
}
this.setData({
leftheight:leftheight,
rightheight:rightheight,
itemsleft:itemsleft,
itemsright:itemsright,
pageorder:this.data.pageorder+1,
msgarray:this.properties.msg.slice(0,20) //设置初始渲染列表
})
},
},
//页面生命周期
pageLifetimes:{
hide:function(){
this._hidemask()
}
},
//数据监听
observers:{
'loadmore':function(newval){
if(newval){ //产生加载请求
let leftheight=this.data.leftheight
let rightheight=this.data.rightheight
let itemsleft=this.data.itemsleft
let itemsright=this.data.itemsright
let pageorder=this.data.pageorder
if(this._pagerelation()!=0){ //未到最后一页
for(let i=0;i用法举例：
新建一个页面，在wxml页输入
在js页面输入
data: {
mymessage:[{itemsurl:'',picheight:150,detail:'会地方的基础上',price:245,payers:4567,id:0},
{itemsurl:'',picheight:130,detail:'很合适的十多个',price:356,payers:233,id:1},
{itemsurl:'',picheight:140,detail:'电话手表编程',price:377.9,payers:12,id:2},
{itemsurl:'',picheight:160,detail:'当回事呢购物',price:7899,payers:54761,id:3},
{itemsurl:'',picheight:140,detail:'变成蛇的差别不大',price:245,payers:4567,id:4},
{itemsurl:'',picheight:160,detail:'的接口处超声波产生',price:245,payers:4567,id:5},
{itemsurl:'',picheight:150,detail:'会地方的基础上',price:245,payers:4567,id:6},
{itemsurl:'',picheight:130,detail:'会地方的基础上',price:245,payers:4567,id:7},
{itemsurl:'',picheight:160,detail:'会地方的基础上',price:245,payers:4567,id:8},
{itemsurl:'',picheight:130,detail:'会地方的基础上',price:245,payers:4567,id:9},
{itemsurl:'',picheight:150,detail:'会地方的基础上',price:245,payers:4567,id:10},
{itemsurl:'',picheight:150,detail:'会地方的基础上',price:245,payers:4567,id:11},
{itemsurl:'',picheight:170,detail:'会地方的基础上',price:245,payers:4567,id:12},
{itemsurl:'',picheight:140,detail:'会地方的基础上',price:245,payers:4567,id:13},
{itemsurl:'',picheight:160,detail:'会地方的基础上',price:245,payers:4567,id:14},
{itemsurl:'',picheight:160,detail:'会地方的基础上',price:245,payers:4567,id:15},
{itemsurl:'',picheight:150,detail:'会地方的基础上',price:245,payers:4567,id:16},
{itemsurl:'',picheight:140,detail:'会地方的基础上',price:245,payers:4567,id:17},
{itemsurl:'',picheight:150,detail:'武松要打虎',price:245,payers:4567,id:18},
{itemsurl:'',picheight:140,detail:'会地方的基础上',price:245,payers:4567,id:19},
{itemsurl:'',picheight:140,detail:'会地方的基础上',price:245,payers:4567,id:20},
{itemsurl:'',picheight:160,detail:'我在河边洗澡',price:245,payers:4567,id:21}
],
istolast:false,
haveshowmask:false,
myconvey:false,
},
//监听页面触底
onReachBottom:function(){
this.setData({
istolast:true
})
},
//取消加载标记
_cancelloadmore:function(){
this.setData({
istolast:false
})
},
//取消蒙层
_clickspace:function(){
this.setData({
haveshowmask:false
})
},
//需要新消息
_needonemsg:function(e){
this.data.mymessage.splice(e.detail.position,1)
this.data.mymessage.push({itemsurl:'',picheight:170,detail:'好像是睡觉一样的人大概是动感',price:371,payers:1356,id:22})
this.setData({
haveshowmask:false
})
var i=setTimeout(() => {
this.setData({
myconvey:true,
mymessage:this.data.mymessage
})
clearTimeout(i)
}, 1000);
},
//取消新消息标识位
_cancelconvey:function(){
this.setData({
myconvey:false
})
},最后在JSON页面引用waterfall组件，便可看到有趣的现象。祝大家玩得愉快！