关于微信小程序简单瀑布流的制作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--components/showitems/showitems.wxml-->
<!--展示商品通用框架-->
<view class="showitems-outerbox">
  <navigator class="showitems-nav" hover-class="none" url="{{goods.url}}">
    <image class="showitems-img" style="height:{{goods.picheight}}px;" lazy-load="{{true}}"></image>
    <view class="showitems-text-box">
      <view class="showitems-goods-detail">{{goods.detail}}</view>
      <view class="showitems-text-bottom">
        <view class="showitems-goods-price">￥{{goods.price}}</view>
        <view class="showitems-pay-number">{{convertpayers}}人付款</view>
      </view>
    </view>
  </navigator>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/* 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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 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: {

  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--components/waterfall/waterfall.wxml-->
<!--瀑布流布局-->
<view class="waterfall-outer">
  <view class="waterfall-left">
    <block wx:for="{{itemsleft}}" wx:key="index">
      <view class="waterfall-itemsbox" catchlongpress="_showmask" data-id="{{item.id}}">
        <showitems goods="{{item}}"></showitems>
        <view class="waterfall-threedots" catchtap="_showmask" data-id="{{item.id}}">...</view>
        <view class="waterfall-mask" wx:if="{{item.id==maskid && isshowmask}}" catchtap="_hidemask">
          <view class="waterfall-mask-unlike" catchtap="_unlike">不喜欢</view>
        </view>
      </view>
    </block>
  </view>
  <view class="waterfall-right">
    <block wx:for="{{itemsright}}" wx:key="index">
      <view class="waterfall-itemsbox" catchlongpress="_showmask" data-id="{{item.id}}">
        <showitems goods="{{item}}"></showitems>
        <view class="waterfall-threedots" catchtap="_showmask" data-id="{{item.id}}">...</view>
        <view class="waterfall-mask" wx:if="{{item.id==maskid && isshowmask}}" catchtap="_hidemask">
          <view class="waterfall-mask-unlike" catchtap="_unlike">不喜欢</view>
        </view>
      </view>
    </block>
  </view>
</view>

<view class="waterfall-bottom" hidden="{{!istobottom}}">到底了~</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/* 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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
// 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<this._remainitems();i++){
            if(leftheight<=rightheight){
              itemsleft.push(this.properties.msg[i+pageorder*20])
              leftheight += this.properties.msg[i+pageorder*20].picheight+70+8
            }
            else{
              itemsright.push(this.properties.msg[i+pageorder*20])
              rightheight += this.properties.msg[i+pageorder*20].picheight+70+8
            }
          }
  
          this.setData({
            leftheight:leftheight,
            rightheight:rightheight,
            itemsleft:itemsleft,
            itemsright:itemsright,
            pageorder:pageorder+1,
            msgarray:this.properties.msg.slice(0,this.data.msgarray.length+this._remainitems())     //更新动态渲染信息列表
          })
        }
        else{     //到最后一页
          this.setData({
            istobottom:true
          })
        }

        this._cancelloadmore()  //取消加载更多标记
      }
    },
    'convey':function(newval){
      if(newval){  //重置瀑布流
        let leftheight=0
        let rightheight=0
        let itemsleft=[]
        let itemsright=[]

        this.data.msgarray=this.properties.msg.slice(0,this.data.msgarray.length)
        for(let i=0;i<this.data.msgarray.length;i++){
          if(leftheight<=rightheight){
            itemsleft.push(this.data.msgarray[i])
            leftheight += this.data.msgarray[i].picheight+70+8
          }
          else{
            itemsright.push(this.data.msgarray[i])
            rightheight += this.data.msgarray[i].picheight+70+8
          }
        }
        this.setData({
          itemsleft:itemsleft,
          itemsright:itemsright,
          leftheight:leftheight,
          rightheight:rightheight
        })
        this._cancelconvey()    //取消数据传送完毕标记
      }
    }
  },

  //组件方法
  methods: {
    _totalpagenum(){   //20张一页,共几页
      var msglength=this.properties.msg.length
      return msglength%20==0?Math.floor(msglength/20):Math.floor(msglength/20+1)
    },
    _pagerelation(){    //判断页数情况
      var totalpage=this._totalpagenum()
      var curpage=this.data.pageorder
      return (totalpage-curpage==0)?0:((totalpage-curpage==1)?1:2)
    },
    _remainitems(){    //剩余项目
      switch(this._pagerelation()){
        case 0: return 0;
        case 1: return this.properties.msg.length-this.data.pageorder*20;
        case 2: return 20;
        default: return 0;
      }
    },
    _cancelloadmore(){   //发送取消加载更多标记的请求,关联loadmore接口
      this.triggerEvent('cancelloadmore')
    },

    _showmask(e){     //显示蒙层
      this.setData({
        maskid:e.currentTarget.dataset.id,
        isshowmask:true
      })
    },
    _hidemask(){     //取消蒙层
      this.setData({
        isshowmask:false
      })
    },
    _unlike(){      //点击不喜欢按钮
      for(let i=0;i<this.data.msgarray.length;i++){
        if(this.data.msgarray[i].id==this.data.maskid){    //按钮id和蒙层id相同
          this.setData({
            absposition:i
          })
          break
        }
      }
      this.triggerEvent('needonemsg',{position:this.data.absposition})    //发送请求通知页面更新消息列表,关联convey接口
    },
    _cancelconvey(){    //发送清除convey标识的请求,关联convey接口
      this.triggerEvent('cancelconvey')
    },
  }
})

1
2
3
<view style="width:calc(100% - 20px);margin:10px;" bindtap="_clickspace">
  <waterfall msg="{{mymessage}}" loadmore="{{istolast}}" bind:cancelloadmore="_cancelloadmore" isshowmask="{{haveshowmask}}" convey="{{myconvey}}" bind:needonemsg="_needonemsg" bind:cancelconvey="_cancelconvey"></waterfall>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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
    })
  },