devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp使用css实现瀑布流

作者：知新_RL | 2024-06-16 21:59:12

赞

踩

uniapp使用css实现瀑布流

页面


 

  1. <template>
  2.     <view>
  3.         <gj v-if="likeList.length == 0"></gj>
  4.         <view v-else class="list">
  5.         <view class="pbl" v-for="(item,index) in likeList" :key="index">
  6.             <view class="image">
  7.                 <image  fade-show  lazy-load :lazy-load-margin="0" mode="widthFix" :src="item.img"></image>
  8.             </view>
  9.             <view class="title">
  10.                 {{item.title}}
  11.             </view>
  12.             <view class="more">
  13.                 <view class="autohr">
  14.                     {{item.author}}
  15.                 </view>
  16.                 <view class="like">
  17.                     {{item.like}}
  18.                 </view>
  19.             </view>
  20.         </view>
  21.         </view>
  22.     </view>
  23. </template>
  24.  
  25. <script>
  26.     import gj from '../gj.vue'
  27.     export default {
  28.         components:{gj},
  29.         data() {
  30.             return {
  31.                 title: 'Hello',
  32.                 likeList:[
  33.                 ]
  34.             }
  35.         },
  36.         onLoad() {
  37.             this.getData()
  38.         },
  39.         methods: {
  40.             getData(){
  41.                 setTimeout(()=>{
  42.                     this.likeList=[{
  43.                     title:"这样的礼物你喜欢吗?",
  44.                     img:"https://sns-webpic-qc.xhscdn.com/202406120934/e794f1ff25b0b3492af7becb4c427e91/1040g2sg3134kh5lh6c705o7vonl08qarfhj9s30!nc_n_webp_mw_1",
  45.                     author:"椰子哦",
  46.                     like:"314"
  47.                     },{
  48.                     author:"快乐样",
  49.                     like:"325",
  50.                     title:"大佬点的黑桃全家桶，今晚不醉不归，大干下一场，大家一起来!!!",
  51.                     img:"https://sns-webpic-qc.xhscdn.com/202406120934/074bf5b39465a1a7342f7ba55c9216bc/1040g2sg3134fa3k46m705nmvesrgbjaulu8a5mg!nc_n_webp_mw_1"
  52.                     },{
  53.                     author:"奈奈酱",
  54.                     like:"100+",
  55.                     title:"两个月的布偶猫怎有这么小吗?",
  56.                     img:"https://sns-webpic-qc.xhscdn.com/202406121051/e9e0d308df72d7088a8fcd4cdd90bf8f/1040g2sg313mfvcvk1od05n99ku65h3t2t75jglg!nc_n_webp_mw_1"
  57.                     },{
  58.                     like:"200+",
  59.                     author:"haha",
  60.                     title:"哈哈哈，好可爱的小女孩,打不过...",
  61.                     img:"https://sns-webpic-qc.xhscdn.com/202406121051/d603957a1f4edec9bffaa85cdb72b1e9/1040g0083130o59m670005oo9h6ijonkorh9paeg!nc_n_webp_mw_1"
  62.                     },{
  63.                     title:"这样的礼物你喜欢吗?",
  64.                     img:"https://sns-webpic-qc.xhscdn.com/202406120934/e794f1ff25b0b3492af7becb4c427e91/1040g2sg3134kh5lh6c705o7vonl08qarfhj9s30!nc_n_webp_mw_1",
  65.                     author:"椰子哦",
  66.                     like:"314"
  67.                     },{
  68.                         like:"500+",
  69.                         author:"不懂的茄子",
  70.                         title:"落日好美，你喜欢吗？",
  71.                         img:"https://sns-webpic-qc.xhscdn.com/202406121102/906ea88e8ab9f4481ceb072f8d2b1487/1040g008312onnkkr385g5nqa46lg80uph80gq4o!nc_n_webp_mw_1"
  72.                     }]
  73.                 },300)
  74.             }
  75.         }
  76.     }
  77. </script>
  78.  
  79. <style lang="less">
  80.     Page{
  81.         background-color: aliceblue;
  82.         padding-bottom: 100rpx;
  83.     }
  84.     .list {
  85.         padding: 10rpx;
  86.         column-count: 2;
  87.         box-sizing:content-box;
  88.         padding-right: 30rpx;
  89.         }
  90.     .pbl{
  91.         width: 360rpx;
  92.         break-inside: avoid;
  93.         overflow: hidden;
  94.         border-radius: 10px;
  95.         overflow: hidden;
  96.         margin-bottom: 20rpx;
  97.         background-color: #fff;
  98.         padding: 0 10rpx;
  99.         box-sizing: border-box;
  100.         &:last-child{
  101.             margin-bottom: 10rpx;
  102.         }
  103.         .image{
  104.             width: 100%;
  105.             border-radius: 12rpx;
  106.             overflow: hidden;
  107.             margin-top: 8rpx;
  108.             &>image{
  109.                 width: 100%;
  110.                 height: 100%;
  111.             }
  112.         }
  113.         
  114.         .title{
  115.             font-size: 30rpx;
  116.             margin-bottom: 6rpx;
  117.             display: -webkit-box;
  118.             text-overflow: ellipsis;
  119.             overflow: hidden;
  120.             -webkit-box-orient: vertical;
  121.             -webkit-line-clamp: 2;//当属性值为3，表示超出3行隐
  122.         }
  123.         .more{
  124.             display: flex;
  125.             justify-content: space-between;
  126.             color: #9499aa;
  127.             margin-bottom: 6rpx;
  128.             font-size: 26rpx;
  129.         }
  130.     }
  131. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/728436
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号