微信小程序瀑布流实现及其分页加载（圈子，元素列表等）

于 2020-10-16 19:58:34 发布
阅读量1.4k 收藏 6
点赞数
CC 4.0 BY-SA版权
分类专栏： 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaseDreamer_/article/details/109123669

瀑布流

你好！ 因为近期在做小程序相关，所以来记录所用到的相关demo，同时也希望能够帮到他人

效果图

效果图

思路

  1. 将整个页面分成左右两栏
  2. 给每个条目的图片一个固定宽度，然后给图片一个最小高度和最大高度
  3. 根据数据依次赋值即可

代码

  • wxml
<scroll-view class="scView" scroll-y="true" bindscrolltolower="scrollTolower">
  <view class="scSonView">

    <block wx:if="{{circleList.length != 0}}">

      <view class="reclyViewBg">

        <view class="reclyViewSbg">

          <view class="reclyViewLeft">

            <block wx:for="{{circleList}}" wx:key="idx">

              <view class="rlvItem" wx:if="{{index%2==0}}" id="{{item.id}}" bindtap="hotCircleCilck">

                <image src="{{item.headImag}}" class="rlvItemImage" mode="widthFix" lazy-load="true" />

                <view class="rlvItemMsg">{{item.bomMsg}}</view>

                <view class="rlvItemBomUserMsg">

                  <view class="rlvItemBomLeft">

                    <image src='https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3145178383,2701734038&fm=26&gp=0.jpg' class="rlvIBLHeadImag" />

                    <text class="rlvIBLUserName">{{item.uName}}</text>

                  </view>

                  <view class="rlvItemBomUserFabulous">

                    <text class="rlvItemBomUfNumber">{{item.likeNumber}}</text>

                    <image class="rlvItemBomUfImage" src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2665548017,724169019&fm=26&gp=0.jpg' />

                  </view>

                </view>

              </view>

            </block>

          </view>

          <view class="reclyViewRight">

            <block wx:for="{{circleList}}" wx:key="idx">

              <view class="rlvItem" wx:if="{{index%2==1}}" id="{{item.id}}" bindtap="hotCircleCilck">

                <image src="{{item.headImag}}" class="rlvItemImage" mode="widthFix" lazy-load="true" />

                <view class="rlvItemMsg">{{item.bomMsg}}</view>

                <view class="rlvItemBomUserMsg">

                  <view class="rlvItemBomLeft">

                    <image src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2222832720,1658029360&fm=26&gp=0.jpg' class="rlvIBLHeadImag" />

                    <text class="rlvIBLUserName">{{item.uName}}</text>

                  </view>

                  <view class="rlvItemBomUserFabulous">

                    <text class="rlvItemBomUfNumber">{{item.likeNumber}}</text>

                    <image class="rlvItemBomUfImage" src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2665548017,724169019&fm=26&gp=0.jpg' />

                  </view>

                </view>

              </view>

            </block>

          </view>

        </view>


      </view>

    </block>

    <block wx:else>

      <view class="p-null">

        <image src="/images/zbdl.png" style="width: 128rpx; height: 128rpx;margin-bottom: 20rpx;" />

        <view>暂时没有热门文章</view>

      </view>

    </block>

  </view>

</scroll-view>
  • wxss
page{
  width: 100%;
  height: 100%;
  background: #16161A;
}
.scView{
  width: 100%;
  height: 100%;
}
.scSonView{
  width: 100%;
  height: 100%;
}
.reclyViewBg {
  padding-left: 32rpx;
  padding-right: 32rpx;
  padding-bottom: 32rpx;
  padding-top: 8rpx;
  overflow: hidden;
  box-sizing: border-box;
}

.reclyViewSbg {
  clear: both !important;
  overflow: hidden;
  width: 100%;
}

.rlvItem{
  margin-top: 24rpx;
}

.reclyViewLeft {
  width: 331rpx;
  overflow: hidden;
  float: left;
}



.reclyViewRight {
  width: 331rpx;
  overflow: hidden;
  float: right;
}



.rlvItem {
  display: inline-block;
  background: #1F1F1F;
  /* margin-bottom: 15rpx; */
  width: 100%;
  position: relative;
  border-radius: 16rpx;
}



.rlvItemImage {
  width: 331rpx;
  height: auto;
  min-height: 40rpx;
  max-height: 1000rpx;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
}



.rlvItemMsg {
  margin-top: 10rpx;
  font-size: 26rpx;
  display: block;
  color: #ECECEC;
  margin-left: 20rpx;

  /* 控制宽度 */
  width: auto;
  max-width: 293rpx;

  /* 显示多行 */
  display: -webkit-box;
  overflow: hidden;

  /* 2为显示的行数 */

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}



.rlvItemBomUserMsg {
  display: flex;
  align-items: center;
  padding: 15rpx 0;
}



.rlvItemBomLeft {
  width: 60%;
  display: flex;
  align-items: center;
}



.rlvIBLHeadImag {
  width: 35rpx;
  height: 35rpx;
  border-radius: 50%;
  margin-left: 20rpx;
}



.rlvIBLUserName {
  width: auto;
  max-width: 148rpx;
  font-size: 24rpx;
  margin-left: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: nowrap;
  color: #B3B3B3;
}



.rlvItemBomUserFabulous {

  width: 40%;

  display: flex;

  align-items: center;

  flex-direction: row-reverse;

  margin-right: 16rpx;

}

.rlvItemBomUfNumber {
  font-size: 24rpx;
  margin-left: 7rpx;
  color: #B3B3B3
}

.rlvItemBomUfImage {
  width: 30rpx;
  height: 30rpx;
}


.p-null {
  width: 100%;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
}
  • javaScript
	//data 
	 circleList:[
      {
        id:0,
        headImag:'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3375017683,2174997570&fm=26&gp=0.jpg',
        bomMsg:'是美女呀',
        uName:'6',
        likeNumber:'985'
      },
      {
        id:1,
        headImag:'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1697850329,1416483110&fm=26&gp=0.jpg',
        bomMsg:'是美大师傅女呀',
        uName:'6',
        likeNumber:'995'
      },
      {
        id:2,
        headImag:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=122443580,193955624&fm=26&gp=0.jpg',
        bomMsg:'是美sad女呀',
        uName:'6',
        likeNumber:'234'
      },  {
        id:3,
        headImag:'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3083490177,4087830236&fm=26&gp=0.jpg',
        bomMsg:'是美胜多负少女呀',
        uName:'6',
        likeNumber:'435'
      },  {
        id:4,
        headImag:'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2076212417,3005667226&fm=26&gp=0.jpg',
        bomMsg:'是美发女呀',
        uName:'6',
        likeNumber:'4343'
      },
      {
        id:5,
        headImag:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1625310290,73752710&fm=26&gp=0.jpg',
        bomMsg:'是美女呀',
        uName:'6',
        likeNumber:'985'
      },
      {
        id:6,
        headImag:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2374579182,3757175384&fm=26&gp=0.jpg',
        bomMsg:'是美大师傅女呀',
        uName:'6',
        likeNumber:'995'
      },
      {
        id:7,
        headImag:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2001767787,752829909&fm=26&gp=0.jpg',
        bomMsg:'是美sad女呀',
        uName:'6',
        likeNumber:'234'
      },  {
        id:8,
        headImag:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3860060341,126967039&fm=26&gp=0.jpg',
        bomMsg:'是美胜多负少女呀',
        uName:'6',
        likeNumber:'435'
      },  {
        id:9,
        headImag:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=122443580,193955624&fm=26&gp=0.jpg',
        bomMsg:'是美发女呀',
        uName:'6',
        likeNumber:'688'
      },
      {
        id:10,
        headImag:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2807460086,2881854178&fm=26&gp=0.jpg',
        bomMsg:'是美发女呀',
        uName:'6',
        likeNumber:'688'
      },
      {
        id:11,
        headImag:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2332975657,3496749507&fm=26&gp=0.jpg',
        bomMsg:'是美发女呀',
        uName:'6',
        likeNumber:'688'
      }
      , {
        id:12,
        headImag:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3076091725,2590138737&fm=26&gp=0.jpg',
        bomMsg:'是美发女呀',
        uName:'6',
        likeNumber:'688'
      },
      {
        id:13,
        headImag:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2410116264,1562918764&fm=26&gp=0.jpg',
        bomMsg:'是美发女呀',
        uName:'6',
        likeNumber:'688'
      },
      {
        id:14,
        headImag:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3164884185,619407698&fm=26&gp=0.jpg',
        bomMsg:'是美发女呀',
        uName:'6',
        likeNumber:'688'
      },
    ],
    isHaveMore:true,
    moreBeauty:[
      {
        id:15,
        headImag:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1056235612,2749108915&fm=26&gp=0.jpg',
        bomMsg:'是美女呀',
        uName:'6',
        likeNumber:'985'
      },
      {
        id:16,
        headImag:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1578352299,1489167013&fm=11&gp=0.jpg',
        bomMsg:'是美大师傅女呀',
        uName:'6',
        likeNumber:'995'
      },
      {
        id:17,
        headImag:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=122443580,193955624&fm=26&gp=0.jpg',
        bomMsg:'是美sad女呀',
        uName:'6',
        likeNumber:'234'
      },  {
        id:18,
        headImag:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1625310290,73752710&fm=26&gp=0.jpg',
        bomMsg:'是美胜多负少女呀',
        uName:'6',
        likeNumber:'435'
      },  {
        id:19,
        headImag:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=491778059,2973055073&fm=11&gp=0.jpg',
        bomMsg:'是美发女呀',
        uName:'6',
        likeNumber:'688'
      },
      {
        id:20,
        headImag:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2195374342,1553984885&fm=26&gp=0.jpg',
        bomMsg:'是美女呀',
        uName:'6',
        likeNumber:'985'
      },
      {
        id:21,
        headImag:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1828982182,1114677948&fm=26&gp=0.jpg',
        bomMsg:'是美大师傅女呀',
        uName:'6',
        likeNumber:'995'
      },
      {
        id:22,
        headImag:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3362814640,1802564356&fm=26&gp=0.jpg',
        bomMsg:'是美sad女呀',
        uName:'6',
        likeNumber:'234'
      },  {
        id:23,
        headImag:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=103751946,2665235783&fm=26&gp=0.jpg',
        bomMsg:'是美胜多负少女呀',
        uName:'6',
        likeNumber:'435'
      },  {
        id:24,
        headImag:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=122443580,193955624&fm=26&gp=0.jpg',
        bomMsg:'是美发女呀',
        uName:'6',
        likeNumber:'688'
      },
      {
        id:25,
        headImag:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3554772111,675329364&fm=26&gp=0.jpg',
        bomMsg:'是美发女呀',
        uName:'6',
        likeNumber:'688'
      },
      {
        id:26,
        headImag:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1923594659,2058543657&fm=26&gp=0.jpg',
        bomMsg:'是美发女呀',
        uName:'6',
        likeNumber:'688'
      }
      , {
        id:27,
        headImag:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1516809084,3577933157&fm=26&gp=0.jpg',
        bomMsg:'是美发女呀',
        uName:'6',
        likeNumber:'688'
      },
      {
        id:28,
        headImag:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2505845389,3637097424&fm=26&gp=0.jpg',
        bomMsg:'是美发女呀',
        uName:'6',
        likeNumber:'688'
      },
      {
        id:29,
        headImag:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1786857612,523702384&fm=26&gp=0.jpg',
        bomMsg:'是美发女呀',
        uName:'6',
        likeNumber:'688'
      },
    ]
    //method
    hotCircleCilck: function(event){
    var tapId = event.currentTarget.id;
    console.log(tapId)
  },
  scrollTolower: function(){
    if(this.data.isHaveMore){
       this.data.circleList = this.data.circleList.concat(this.data.moreBeauty)
       this.setData({
        circleList: this.data.circleList,
        isHaveMore: false
       })
    }else{
      wx.showToast({
        title: '没有更多了',
        icon: 'none',
        image: '',
        duration: 1000,
        mask: true,
        success: function (res) {},
        fail: function (res) {},
        complete: function (res) {},
      })
    }
  
  }

gitHub

https://github.com/897589417/demoCollection

我是入梦，谢谢你的观看我的博客，如果有什么错误，请随时联系我，或者有什么不会的，可以私信我，我们一起讨论，QQ：897589417

评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值