之前我一直在,要想提高自己的代码质量,
就一定要封装自己的组件,
所以我就尽量使用自己的组件。这样可以提高自己的效率
写组件的好处:减少代码的冗余
封装组件的时候,为了不让子元素的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组件 信息列表组件的更多相关文章

  1. Ligerui Grid组件--学生信息列表

    一.目录 1.多层架构+MVC+EF+AUTOFAC+AUTOMAPPER: 2.MVC中验证码的实现(经常用,记录备用) 3.Ligerui首页的快速搭建 4.Ligerui Grid组件--学生信 ...

  2. 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)

    0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...

  3. 编写Java程序,使用JTable表格组件展现人员信息列表

    返回本章节 返回作业目录 需求说明: 使用JTable组件显现人员信息列表 实现思路: 创建一个JTable对象. 创建一个JScrollPane对象(显示横向和纵向滚动条). 将表格添加到滚动面板. ...

  4. 【音乐App】—— Vue-music 项目学习笔记:歌曲列表组件开发

    前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 当前歌曲播放列表 添加歌曲 ...

  5. ionic入门之色彩、图标、边距和界面组件:列表

    目录: 色彩.图标和边距 色彩 图标 内边距 界面组件:列表 列表:.list 成员容器:.item .item: 嵌入文本 .item : 嵌入图标 .item : 嵌入头像 .item : 嵌入缩 ...

  6. 精华 ionic入门之色彩、图标、边距和界面组件:列表

    目录:色彩.图标和边距色彩图标内边距界面组件:列表列表:.list成员容器:.item.item: 嵌入文本.item : 嵌入图标.item : 嵌入头像.item : 嵌入缩略图.item : 嵌 ...

  7. Android(java)学习笔记186:对ListView等列表组件中数据进行增、删、改操作

    1.ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V:  view  (显示的视图) C: controller 控制器 入门案例: acit ...

  8. Android(java)学习笔记129:对ListView等列表组件中数据进行增、删、改操作

    1. ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V:  view  (显示的视图) C: controller 控制器 入门案例: aci ...

  9. 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

    在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...

  10. 可展开的列表组件——ExpandableListView深入解析

    可展开的列表组件--ExpandableListView深入解析 一.知识点 1.ExpandableListView常用XML属性 2.ExpandableListView继承BaseExpanda ...

随机推荐

  1. .NET周刊【11月第3期 2024-11-17】

    国内文章 .NET 9使用Scalar替代Swagger https://www.cnblogs.com/netry/p/18543378/scalar-an-alternative-to-swagg ...

  2. 能不能用uni开发一个线上运动会的APP、小程序?

    引言:uni-app凭借其强大的跨平台能力,成为开发AI运动类APP和小程序的首选框架.本文旨在探讨基于uni进行开发AI运动小程序.APP开发,以及开发过程中遇到的技术难点,并为您介绍一个开箱即用的 ...

  3. gitlab安装与基本使用

    这里会使用一个前端项目自动化部署的方式来进行了解 Node 安装项目依赖.打包都需要 Nginx web 项目部署必须「正向代理.方向代理.负载均衡等等」. GitLab 也会用到 Nginx(默认自 ...

  4. Ubuntu实现SSH外网连接内网(反向隧道)

    应用场景: 如果你有Linux云主机(腾讯.华为等),且公司有一台只有内网IP (或动态IP) 的Linux工作机:你计划在家里工作时,通过家里的电脑连接公司的工作机 (且不想使用类似Teamview ...

  5. spring cloud 使用nacos 作为配置中心

    概要 nacos 可以作为服务注册发现中心,也可以作为配置中心,作为配置中心的时候,系统的配置可以做到自动刷新,即当配置服务器的数据发生更改时,客户端的配置会进行自动的更新. 实现步骤 1.修改mav ...

  6. 使用 Jmeter进行压测

    一.环境配置 因为jmeter需要java环境,所以需要下载Jdk和Jmeter.需要注意jdk的版本和jmeter的匹配问题 推荐大家观看Furion的作者百小僧的视频来学习,讲的很细 https: ...

  7. Oracle.DataAccess.Client.OracleException: 提供程序与此版本的 Oracle 客户机不兼容

    背景:进行程序部署,客户机上原有oracle客户端的版本为2.113.1.0(以下简称113),而数据库.开发机和其他客户机上均采用的2.112.1.0(以下简称112)客户端,所以进行了替换. 卸载 ...

  8. (一)Springboot + vue + 达梦数据库构建RBAC权限模型前后端分离脚手架保姆级教程(界面截图)

    用户登录  系统首页  用户列表  添加用户  修改用户  角色列表  添加角色  修改角色  

  9. uni-app小程序(快手)日志打印坑位记录

    前情 uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE让开发体验也挺棒的,公司项目就是主推uni-app. 坑位 最近在开发一 ...

  10. 服务拆分之《Dubbo服务跨云通信》

    2022年10月开始,公司从阿里请来的架构师将全力推进服务拆分这个计划.实际上这个计划早就提上日程了,只是没有一个带头大哥带着把这个事情搞起来,因为这个系统太庞大了,还非常的复杂,当时就没有哪一个人是 ...