评论

超级简单的瀑布流布局

瀑布流布局

记录小白微信小程序开发日志第四篇,希望能够帮助到大家,如果觉得有用还行可以给帅气的作者点点赞,谢谢

<!-- 瀑布流 -->

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

<view class="xg_all">

<view class="xg_content">

<view class="content_l">

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

<view class="content_item" wx:if="{{index%2==0}}" data-id="{{item.id}}" bindtap="xqTap">

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

<view class="qy-title">{{item.b}}</view>

<view class="qy-user">

<view class="qy-z">

<image src='/images/tx.jpg' class="qy-tx" />

<text class="qy-mz">{{item.c}}</text>

</view>

<view class="qy-y">

<text style="font-size: 24rpx;margin-left: 10rpx;">{{item.d}}</text>

<image src='/images/dz.png' style="width: 30rpx; height: 30rpx;" />

</view>

</view>

</view>

</block>

</view>

<view class="content_r">

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

<view class="content_item" wx:if="{{index%2==1}}" data-id="{{item.id}}" bindtap="xqTap">

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

<view class="qy-title">{{item.b}}</view>

<view class="qy-user">

<view class="qy-z">

<image src='/images/tx.jpg' class="qy-tx" />

<text class="qy-mz">{{item.c}}</text>

</view>

<view class="qy-y">

<text style="font-size: 24rpx;margin-left: 10rpx;">{{item.d}}</text>

<image src='/images/dz.png' style="width: 30rpx; height: 30rpx;" />

</view>

</view>

</view>

</block>

</view>

</view>

<view class='jilu'>—— 没有更多内容了,快去发帖吧 ——</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>

<button class="ft" bindtap="ftTap">

<image src="/images/ft.png " style="width: 48rpx; height: 48rpx; " />

</button>

/* 瀑布流 */


.xg_all {

padding: 15rpx;

overflow: hidden;

box-sizing: border-box;

background: linear-gradient(rgb(245, 245, 245) 0%, rgb(255, 255, 255) 100%);

}


.xg_content {

clear: both !important;

overflow: hidden;

width: 100%;

}


.xg_content .content_l, .xg_content .content_r {

width: 355rpx;

overflow: hidden;

margin: 15rpx 0;

border-radius: 5px;

box-shadow: 0px 0px 20px 0px rgba(235, 235, 235, 0.6);

}


.xg_content .content_l {

float: left;

}


.xg_content .content_r {

float: right;

}


.xg_content .content_item {

display: inline-block;

background: #fff;

margin-bottom: 15rpx;

width: 100%;

position: relative;

border-radius: 5px;

}


.content_item .image {

width: 355rpx;

border-top-left-radius: 5px;

border-top-right-radius: 5px;

}


.content_item .qy-title {

margin-top: 5rpx;

font-size: 28rpx;

display: block;

color: #000;

margin-left: 24rpx;

/* 控制宽度 */

width: 320rpx;

max-width: 320rpx;

/* 显示多行 */

display: -webkit-box;

overflow: hidden;

/* 2为显示的行数 */

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

}


.qy-user {

display: flex;

align-items: center;

padding: 15rpx 0;

}


.qy-z {

width: 60%;

display: flex;

align-items: center;

}


.qy-tx {

width: 32rpx;

height: 32rpx;

border-radius: 50%;

margin-left: 20rpx;

}


.qy-mz {

width: 80px;

font-size: 24rpx;

margin-left: 10rpx;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}


.qy-y {

width: 40%;

display: flex;

align-items: center;

flex-direction: row-reverse;

margin-right: 20rpx;

}


.ft {

position: fixed;

right: 20px;

bottom: 20px;

width: 100rpx;

height: 100rpx;

border-radius: 100%;

display: flex;

align-items: center;

justify-content: center;

background: white;

padding: 0;

margin: 0;

z-index: 99;

box-shadow: 0px 0px 10px 0px #cecece;

}


.ft::after {

border: none;

}


.jilu {

margin-top: 20px;

text-align: center;

font-size: 24rpx;

color: #c7c7c7;

margin-bottom: 5rpx;

position: relative;

}


.p-null {

width: 100%;

margin-top: 100px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

font-size: 22rpx;

}


最后一次编辑于  2020-05-22  
点赞 4
收藏
评论

7 个评论

  • AKA. 皮卡超
    AKA. 皮卡超
    2020-05-22

    虽然很简单,但是还是给你点个赞吧

    1.首先还可以更简单,父级flex flex-wrap:wrap。子级定width就行了,还用得着分左右两列么?

    2.你该写个代码片段出来的https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-05-22
    赞同 1
    回复 3
    • 李梓晨
      李梓晨
      2020-05-22
      谢谢您的点赞和建议,分两列的话是后续有需求需要这样分,没办法我打不过产品经理,哈哈
      2020-05-22
      回复
    • AKA. 皮卡超
      AKA. 皮卡超
      2020-05-22回复李梓晨
      不是,我的1出来也是和你一样的效果,而且不需要两个容器来刻意的区分左右两列,因为为flex-wrap会让奇数个换行。也是瀑布流
      2020-05-22
      回复
    • 团团呗
      团团呗
      2020-05-22回复AKA. 皮卡超
      这个方法只能分列,做不了瀑布流,当item高度不统一的情况,用flex来做就不行
      2020-05-22
      1
      回复
  • 启年网络
    启年网络
    2020-05-22

    不错哦,


    https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-05-22
    赞同
    回复
  • 团团呗
    团团呗
    2020-05-22

    如果图片高度不统一的话,你这个方法就会导致一边高一边低

    2020-05-22
    赞同
    回复 5
    • 李梓晨
      李梓晨
      2020-05-22
      这是瀑布流,您说的是两边高低差距特别大的时候不好看是吧,楼下的楼下They Say哥的建议1可以解决,哈哈
      2020-05-22
      回复
    • 团团呗
      团团呗
      2020-05-22回复李梓晨
      你发的这个方法应该是比较简单,比较好用的瀑布流方案,我之前也是用这个方案,就是因为每个item高度不一致,会导致一边高一边低的,后面就采用检测高度,哪边高度比较低就往哪边塞item,但就是性能比较差,加载多了就会卡顿
      2020-05-22
      回复
    • 李梓晨
      李梓晨
      2020-05-22
      我是个还没毕业的小白没啥经验,微信小程序也是自学的,可能帮不到您抱歉了,您可以问问那种做商城类小程序做的多的大佬,应该挺好解决的,嘿嘿
      2020-05-22
      回复
    • 团团呗
      团团呗
      2020-05-22回复李梓晨
      羡慕在学校,加油哦
      2020-05-22
      回复
    • 李梓晨
      李梓晨
      2020-05-22
      哈哈,我都半年多没回过学校了,已经在深圳搬了半年砖了,靠。半年了我还这么菜
      2020-05-22
      回复
  • brave
    brave
    2020-05-22

    前排占座

    2020-05-22
    赞同
    回复
  • 祺爸💎
    祺爸💎
    2020-05-22

    建议做成代码片段

    我写的瀑布流,请参考:https://developers.weixin.qq.com/community/develop/article/doc/000a2e9db9ca98a3c379cfa4a5d013

    --↓↓👍点击“有用”是回答的动力哦

    2020-05-22
    赞同
    回复 2
  • 卢霄霄
    卢霄霄
    2020-05-22

    建议做成代码片段

    2020-05-22
    赞同
    回复 1
    • 李梓晨
      李梓晨
      2020-05-22
      代码片段怎么做,可以发个教程来康康吗,有时间我再写
      2020-05-22
      回复
  • 苏军
    苏军
    2020-05-22

    来瞅瞅

    2020-05-22
    赞同
    回复
登录 后发表内容