• 微信小程序瀑布流组件

    话不多说直接上干货:
     

    现在component中创建一个waterfull的文件夹，并创建对应的wxml,wxss,jx,json文件

    wxml：
     

    1.     class="content">
    2.     <view class="content-left">
    3.         <block wx:for="{{list}}" wx:key="list" wx:if="{{index % 2 == 0}}">
    4.             <view class="content-item" bindtap="detail" data-v="{{item}}">
    5.                 <image src="{{item.image}}" class="content-item-img" mode="widthFix" />
    6.                 <view class="content-item-box">
    7.                     <view class="content-item-title">{{item.title}}view>
    8.                     <view class="content-item-name">
    9.                         <view class="flex-row">
    10.                             <view style="color:#808080">{{item.info}}view>
    11.                             <view style="height:10rpx">view>
    12.                         view>
    13.                     view>
    14.                 view>
    15.             view>
    16.         block>
    17.     view>
    18.     <view class="content-right">
    19.         <block wx:for="{{list}}" wx:key="list" wx:if="{{index % 2 == 1}}">
    20.             <view class="content-item" bindtap="detail" data-v="{{item}}">
    21.                 <image src="{{item.image}}" class="content-item-img" mode="widthFix" />
    22.                 <view class="content-item-box">
    23.                     <view class="content-item-title">{{item.title}}view>
    24.                     <view class="content-item-name">
    25.                         <view class="flex-row">
    26.                             <view style="color:#808080">{{item.info}}view>
    27.                             <view style="height:10rpx">view>
    28.                         view>
    29.                     view>
    30.                 view>
    31.             view>
    32.         block>
    33.     view>

    item.xxx这些东西根据自己的需求进行定义

    wxss:

    1. .content {
    2.     display: flex;
    3.     justify-content: space-around;
    4. }
    5. .content-left,
    6. .content-right {
    7.     width: 49%;
    8. }
    9. .content-item {
    10.     margin: 10rpx auto 20rpx;
    11.     background: #fff;
    12.     width: 98%;
    13.     border-radius: 20rpx;
    14.     overflow: hidden;
    15. }
    16. .content-item-img {
    17.     width: 100%;
    18. }
    19. .content-item-box {
    20.     width: 95%;
    21.     margin-left: 2.5%;
    22.     font-size: 24rpx;
    23.     color: #333;
    24.     padding: 5rpx;
    25.     box-sizing: border-box;
    26. }
    27. .content-item-title {
    28.     /* 一行省略 */
    29.     text-overflow: ellipsis;
    30.     display: -webkit-box;
    31.     -webkit-box-orient: vertical;
    32.     -webkit-line-clamp: 1;
    33.     overflow: hidden;
    34.     font-size: 16px;
    35.     font-weight: 500;
    36. }
    37.  
    38. .content-item-name {
    39.     display: flex;
    40.     align-items: center;
    41.     justify-content: space-between;
    42.     margin-top: 20rpx;
    43.     font-size: 22rpx;
    44. }

    js:

    1. //index.js
    2. Component({
    3.     properties: {
    4.         list: {
    5.             type: Array,
    6.             defaultValue: []
    7.         }
    8.     },
    9.     methods: {
    10.        
    11.         //wxml中绑定的事件在此处定义
    12.     }
    13.   });

    使用瀑布流的页面，在其json文件中先引人

    1. {
    2.   "navigationBarTitleText": "",
    3.   "usingComponents": {
    4.     "waterfull": "/component/Waterfull/Waterfull",
    5.   }
    6. }

    wxml页面使用组件

    <waterfull list="{{list}}">waterfull>

    {{list}}为要传过去的数组对象也就是需要生成瀑布流的数据

  • 相关阅读:
    初识EasyAR
    Oracle 中的 PL/SQL
    【C#项目】使用百度ai人脸库实现人脸识别
    汽车电子电气架构演进驱动主机厂多重变化
    EMS Advanced Data Import高级数据导入选项Crack版
    AcWing 1137. 选择最佳线路 题解（最短路）
    C#基础--运算符和类型强制转换
    Vue笔记-vue中使用JS创建的函数
    车载通信架构 —— 传统车内通信网络发展回顾
    Android 面（被）试（锤）现场还原~
  • 原文地址：https://blog.csdn.net/qq_63608386/article/details/134099288