uni-app组件 信息列表组件
之前我一直在,要想提高自己的代码质量,
就一定要封装自己的组件,
所以我就尽量使用自己的组件。这样可以提高自己的效率
写组件的好处:减少代码的冗余
封装组件的时候,为了不让子元素的padding,
影响父级元素的宽度。
父级元素使用了怪异盒子
/* 怪异盒子 不会计算padding */
box-sizing: border-box;
为了给提供者,可以修改盒子的背景色等。
如果是h5端的话,直接在主界面中给组件添加一个类就可以修改了
如果是在微信小程序中,需要给主界面的组件添加一个类,然后使用穿透属性
组件
<template>
<view class="part-demo">
<view class="part-demo-flex" @click="hanlderThe(item)" v-for="(item,index) in picLuanglist">
<view class="left-part">
{{item.lauang}}
</view>
<view class="right-part">
{{item.madata}}
</view>
</view>
</view>
</template>
<script>
export default {
props:{
picLuanglist:{
type:Array
}
},
methods:{
hanlderThe(mess){
this.$emit("hanlder",[mess])
}
}
}
</script>
<style scoped>
.part-demo{
margin: auto;
width: 690rpx;
background:"#ffffff";
border-radius: 20rpx;
box-shadow: 0pt 0pt 13pt 6pt rgba(179,179,179,0.1);
padding-left: 30rpx;
padding-right: 32rpx;
/* 怪异盒子 不会计算padding */
box-sizing: border-box;
}
.part-demo-flex{
display: flex;
justify-content: space-between;
height: 94rpx;
line-height: 94rpx;
}
.left-part{
width: 500rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 32rpx;
font-weight: 400;
color: #963c3c;
}
.right-part{
font-size: 24rpx;
font-weight: 400;
color: #963c3c;
text-align: right;
}
</style>
主页面
<pic-laung-dec-list-part :picLuanglist="picLuanglist"
@hanlder="currentHanler"
class="my-updata"
></pic-laung-dec-list-part>
import picLaungDecListPart from "../../components/picLaungDecListPart.vue"
picLuanglist:[
{lauang:"关于开展2020年教职工送温暖活动",madata:"02-01"},
{lauang:"关于举行致敬!度颁奖晚会的通知",madata:"02-11"},
{lauang:"关于开展教职工“送温暖”活动的",madata:"03-21"},
{lauang:"关于举行 “致敬!度颁奖晚会的通知",madata:"04-11"},
{lauang:"开展校园资产管理培训会议通知",madata:"04-21"},
]
components:{
"pic-laung-dec-list-part":picLaungDecListPart
},
methods:{
currentHanler(mess){
console.log(mess[0])
}
}
如何想在主界面中,修改css样式咋办????
/*适用H5*/
.my-updata {
background: #09BB07;
}
/*适用小程序*/
.my-updata >>> .part-demo{
background: #09BB07;
}

uni-app组件 信息列表组件的更多相关文章
- Ligerui Grid组件--学生信息列表
一.目录 1.多层架构+MVC+EF+AUTOFAC+AUTOMAPPER: 2.MVC中验证码的实现(经常用,记录备用) 3.Ligerui首页的快速搭建 4.Ligerui Grid组件--学生信 ...
- 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)
0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...
- 编写Java程序,使用JTable表格组件展现人员信息列表
返回本章节 返回作业目录 需求说明: 使用JTable组件显现人员信息列表 实现思路: 创建一个JTable对象. 创建一个JScrollPane对象(显示横向和纵向滚动条). 将表格添加到滚动面板. ...
- 【音乐App】—— Vue-music 项目学习笔记:歌曲列表组件开发
前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 当前歌曲播放列表 添加歌曲 ...
- ionic入门之色彩、图标、边距和界面组件:列表
目录: 色彩.图标和边距 色彩 图标 内边距 界面组件:列表 列表:.list 成员容器:.item .item: 嵌入文本 .item : 嵌入图标 .item : 嵌入头像 .item : 嵌入缩 ...
- 精华 ionic入门之色彩、图标、边距和界面组件:列表
目录:色彩.图标和边距色彩图标内边距界面组件:列表列表:.list成员容器:.item.item: 嵌入文本.item : 嵌入图标.item : 嵌入头像.item : 嵌入缩略图.item : 嵌 ...
- Android(java)学习笔记186:对ListView等列表组件中数据进行增、删、改操作
1.ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V: view (显示的视图) C: controller 控制器 入门案例: acit ...
- Android(java)学习笔记129:对ListView等列表组件中数据进行增、删、改操作
1. ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V: view (显示的视图) C: controller 控制器 入门案例: aci ...
- 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用
在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...
- 可展开的列表组件——ExpandableListView深入解析
可展开的列表组件--ExpandableListView深入解析 一.知识点 1.ExpandableListView常用XML属性 2.ExpandableListView继承BaseExpanda ...
随机推荐
- vue $forceUpdate()强制刷新
改变列表的值 一直不渲染 <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> ...
- (Redis基础教程之十三) 如何从命令行更改Redis的配置
介绍 Redis是一个开源的内存中键值数据存储.Redis有几个命令,可让您即时更改Redis服务器的配置设置.本教程将介绍其中一些命令,并说明如何使这些配置更改永久生效. 如何使用本指南 本指南以备 ...
- vue3-Pinia
Pinia 是 Vue.js 的一个状态管理库,用于在 Vue 应用程序中管理共享状态.它是 Vuex 的后继者,提供了一个简单.直观且灵活的方式来处理应用中的全局状态,比如用户登录信息.应用配置.购 ...
- 『玩转Streamlit』--表单Form
在Streamlit中,Form组件是一种特殊的UI元素,允许用户输入数据而不立即触发应用的重新运行. 这对于创建需要用户输入多个参数后再进行处理的交互式表单非常有用. 1. 概要 Form组件的主要 ...
- Echarts 提示组件
1.开启指示器 默认情况下,指示器是关闭状态,如果需要开启,直接配置tooltip字段即可 var option = { tooltip:{}, } 2.指示器的触发类型 触发类型的字段为trigge ...
- 鸿蒙NEXT开发案例:世界时间表
[引言] 本案例将展示如何使用鸿蒙NEXT框架开发一个简单的世界时钟应用程序.该应用程序能够展示多个城市的当前时间,并支持搜索功能,方便用户快速查找所需城市的时间信息.在本文中,我们将详细介绍应用程序 ...
- Python 和 Podman
1. Windows 10 上安装 Python 开始在 Windows 上使用 Python(初学者) 2. 使用 pip Python 的 Microsoft Store 安装包括 pip(标准包 ...
- 加速人民币国际化,CIPS迎来三大变化
何谓CIPS? 人民币跨境支付系统(Cross-border Interbank Payment System,简称CIPS)是由中国人民银行组织开发的独立支付系统,为境内外金融机构人民币跨境和离岸业 ...
- 【Java】SpringBoot邮件发送实现
Springboot3 邮件发送 哔哩哔哩 萌狼蓝天 微信公众号 萌狼蓝天 依赖 <dependency> <groupId>org.springframework.boot& ...
- 第 5 章 Debian 系统中可用的软件
目录 5.1. Debian GNU/Linux 收录了哪些类型的应用程序和开发工具? 5.2. 谁编写了所有这些软件? 5.3. 我应该如何获得一份 Debian 打包的程序的最新列表? 5.4. ...