微信小程序瀑布流组件

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

wxml

    <view class="content">
    <view class="content-left">
        <block wx:for="{{list}}" wx:key="list" wx:if="{{index % 2 == 0}}">
            <view class="content-item" bindtap="detail" data-v="{{item}}">
                <image src="{{item.image}}" class="content-item-img" mode="widthFix" />
                <view class="content-item-box">
                    <view class="content-item-title">{{item.title}}</view>
                    <view class="content-item-name">
                        <view class="flex-row">
                            <view style="color:#808080">{{item.info}}</view>
                            <view style="height:10rpx"></view>
                        </view>
                    </view>
                </view>
            </view>
        </block>
    </view>
    <view class="content-right">
        <block wx:for="{{list}}" wx:key="list" wx:if="{{index % 2 == 1}}">
            <view class="content-item" bindtap="detail" data-v="{{item}}">
                <image src="{{item.image}}" class="content-item-img" mode="widthFix" />
                <view class="content-item-box">
                    <view class="content-item-title">{{item.title}}</view>
                    <view class="content-item-name">
                        <view class="flex-row">
                            <view style="color:#808080">{{item.info}}</view>
                            <view style="height:10rpx"></view>
                        </view>
                    </view>
                </view>
            </view>
        </block>
    </view>
</view>

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

wxss:

.content {
    display: flex;
    justify-content: space-around;
}
.content-left,
.content-right {
    width: 49%;
}
.content-item {
    margin: 10rpx auto 20rpx;
    background: #fff;
    width: 98%;
    border-radius: 20rpx;
    overflow: hidden;
}
.content-item-img {
    width: 100%;
}
.content-item-box {
    width: 95%;
    margin-left: 2.5%;
    font-size: 24rpx;
    color: #333;
    padding: 5rpx;
    box-sizing: border-box;
}
.content-item-title {
    /* 一行省略 */
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-size: 16px;
    font-weight: 500;
}
 
.content-item-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;
    font-size: 22rpx;
}

js:

  1. //index.js
    Component({
        properties: {
            list: {
                type: Array,
                defaultValue: []
            }
        },
        methods: {
           
            //wxml中绑定的事件在此处定义
        }
      });

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

  2. {
      "navigationBarTitleText": "",
      "usingComponents": {
        "waterfull": "/component/Waterfull/Waterfull",
      }
    }

    wxml页面使用组件

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/237780.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HTML面试题---专题一

文章目录 一、前言二、 HTML5 中 <header> 和 <footer> 标签的用途是什么&#xff1f;三、如何在 HTML 中嵌入 SVG&#xff08;可缩放矢量图形&#xff09;文件&#xff1f;四、解释 contenteditable 属性的用途五、如何创建随屏幕尺寸缩放的响应式图像&#xff1f…

虚幻学习笔记11—C++结构体、枚举与蓝图的通信

一、前言 结构体的定义和枚举类似&#xff0c;枚举的定义有两种方式。区别是结构体必须以“F”开头命名&#xff0c;而枚举不用。 额外再讲了一下蓝图生成时暴露变量的方法。 二、实现 2.1、结构体 1、定义结构体 代码如下&#xff0c;注意这个定义的代码一定要在“UCLASS()”…

如何将用户有过行为的item用list形式记录下来,另外如何计算list里的个数

导语&#xff1a; 最近做项目&#xff0c;发现有些语法想一想是知道&#xff0c;但实际操作起来跟想的情况不一样哈哈。不是遇见bug就是输出的结果不是自己想要的&#xff0c;CSDN跟知乎找了很多没怎么解决&#xff0c;后面多摸索多实操终于解决&#xff01; test_data[item_…

免费提升图片清晰度的AI平台,效果对比一目了然!

随着AI技术的不断发展&#xff0c;我们有了更多的机会去挖掘和提升图片清晰度的可能性。无论是老照片的翻新、档案的修复&#xff0c;还是遥感图像的处理、医学影像的分析&#xff0c;AI都能大显身手。在过去可能很难办到的将分辨率低的图片转为高清图&#xff0c;如今借助AI简…

如何在OpenWRT软路由系统部署uhttpd搭建web服务器实现远程访问——“cpolar内网穿透”

文章目录 前言1. 检查uhttpd安装2. 部署web站点3. 安装cpolar内网穿透4. 配置远程访问地址5. 配置固定远程地址 前言 uhttpd 是 OpenWrt/LuCI 开发者从零开始编写的 Web 服务器&#xff0c;目的是成为优秀稳定的、适合嵌入式设备的轻量级任务的 HTTP 服务器&#xff0c;并且和…

中伟视界:煤矿行业借力人工智能,防控灾害风险迈出新步伐 《“十四五”矿山安全生产规划》(应急(2022)64号),煤矿重大灾害风险防控系统

随着煤矿行业的发展&#xff0c;煤矿重大灾害风险防控成为了行业关注的重点之一。为了更好地预防和应对灾害风险&#xff0c;煤矿行业开始引入人工智能分析算法和检测场景&#xff0c;以提高灾害风险的识别和预警能力。 在煤矿的重大灾害风险防控中&#xff0c;AI算法发挥着重要…

利用C语言模拟实现堆的基本操作和调堆算法

利用C语言模拟实现堆的基本操作和调堆算法 文章目录 利用C语言模拟实现堆的基本操作和调堆算法前言一、堆的基本原理大根堆和小根堆的比较 二、实现堆的基本操作1&#xff09;结构定义2&#xff09;初始化堆&#xff08;HeapInit&#xff09;3&#xff09;销毁堆&#xff08;He…

基于FPGA的视频接口之高速IO

简介 相对于其他视频接口来说,高速IO接口(以Xilinx公司为例,spartan 6系列的GTP、Artix7系列的GTP,KENTEX7系列的GTX和GTH等)具有简化设计、充分利用FPGA资源、降低设计成本等功能。 高速IO接口传输视频,一般会被拓展为万兆以太网、40G以太网、10G光纤、40G光纤、3G-SDI、…

Python:核心知识点整理大全14-笔记

目录 ​编辑 7.2.2 让用户选择何时退出 parrot.py 7.2.3 使用标志 7.2.4 使用 break 退出循环 cities.py 7.2.5 在循环中使用 continue counting.py 7.2.6 避免无限循环 counting.py 7.3 使用 while 循环来处理列表和字典 7.3.1 在列表之间移动元素 confirmed_user…

案例041:基于微信小程序的私家车位共享系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

区别于C端,B端业务私域流量运营新思路解析!

提起私域流量运营&#xff0c;大家都不陌生&#xff0c;什么快餐、美甲、奶茶、蛋糕、披萨&#xff0c;谁都能说两句&#xff0c;但是大家提到的业务&#xff0c;好像都是C端的业务&#xff0c;B端的业务确很少提及。 难道B端不需要私域吗&#xff0c;答案当然是否定的。下面就…

油田中控室与32台碳储罐之间数据无线传输

二氧化碳强化石油开采技术&#xff0c;须先深入了解石油储层的地质特征和二氧化碳的作用机制。现场有8辆二氧化碳罐装车&#xff0c;每辆罐车上有4台液态二氧化碳储罐&#xff0c;每台罐的尾部都装有一台西门子S7-200 smart PLC。在注入二氧化碳的过程中&#xff0c;中控室S7-1…

力扣题:数字与字符串间转换-12.12

力扣题-12.12 [力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 力扣题1&#xff1a;539. 最小时间差 解题思想&#xff1a;将字符串的时间形式换成数字形式的时间&#xff0c;然后计算差值即可&#xff0c;最重要的是最小的值加上一天的时间加入到数组最后&#xff08…

DevOps:自动化、持续交付和持续集成实践

DevOps&#xff1a;自动化、持续交付和持续集成实践 一、DevOps 简介1.1 DevOps 模式定义1.2 DevOps 的工作原理1.3 DevOps 的优势1.4 DevOps 的意义1.5 DevOps 最佳实践 二、持续集成简介2.1 持续集成的意义2.2 持续集成的工作原理2.3 持续集成的优势 三、持续交付简介3.1 持续…

decomposition-based multi-objective algorithm4SPDPTW

关键词 文章概述 研究背景 多目标选择性接送和配送问题&#xff08;PDPs&#xff09;&#xff1a;研究涉及多目标选择性接送和配送问题&#xff0c;这些问题传统上从单一目标角度进行探讨&#xff0c;以寻找最具盈利性的请求集合&#xff0c;同时遵守一系列限制条件。 经济和…

golang https server如何设计方便抓包定位且安全

代码 测试 用go写后端https服务时&#xff0c;需要定位https包中的内容是否符合预期。 有涉猎的朋友应该了解过https有一种keylog技术&#xff0c;它允许在HTTPS连接中捕获和记录SSL或TLS会话密钥&#xff0c;以便于调试和分析加密流量。 本文将的就是通过可控制开启和关闭的…

Android studio 离线配置gradle

Gradle Distributions Gradle Distributions 查看gradle 文件夹下 gradle-wrapper.properties文件中的distributionUrl 版本号 然后在上边网站下载对应需要的gradle对应版本 下载后复制到 gradle wrapper文件下&#xff0c;同时修改 distributionUrl 指向本地文件 然后同步就…

(C++)vector介绍及其使用

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 前言 我们参考cplusplus文档逐个进行解释。 构造函数 push_back&&pop_back vector迭代器的使用 vector空间增长问题 我们发现resize不缩容&#xff0c;当然&#xff0c;这要看编译器的实现&#xff0c;不同的编译…

据房间Id是否存在,判断当前房间是否到期且实时更改颜色

重点代码展示&#xff1a; <template><el-col style"width: 100%;height: 100%;"><el-col :span"20"><el-card class"room_info"><avue-data-icons :option"option"></avue-data-icons></el-…

手动搭建koa+ts项目框架(路由篇)

文章目录 前言一、安装koa-router二、引入koa-router并使用三、优化路由配置总结如有启发&#xff0c;可点赞收藏哟~ 前言 本文基于手动搭建koats项目框架&#xff08;基础篇&#xff09;配置接口路由 一、安装koa-router npm i -S koa-router二、引入koa-router并使用 ./sr…
最新文章