#uniapp#案例#商品列表制作_.Passion的博客-程序员宅基地

技术标签: 移动端  

可以看我的上一篇文章(这里复用了这个组件)

滚动组件

在这里插入图片描述

<template>
	<about>
		<view class="listcard" v-for="i in 100">
			<view class="listcard-image"><image src="../../static/img/0.jpg" mode="aspectFill"></image></view>
			<view class="listcard-content">
				<view class="listcard-content_title">千层蛋糕</view>
				<view class="listcard-content_sum">美味的蛋糕,超级好吃,嘿嘿</view>
				<view class="listcard-content_des">
					<view class="listcard-content_des-money">100</view>
					<view class="listcard-content_des-money">马上抢</view>
				</view>
			</view>
		</view>
	</about>
</template>

<script>
import about from '@/pages/about/about';
export default {
    
	components: {
    
		about
	},
	data() {
    
		return {
    
			title: 'Hello'
		};
	},
	onLoad() {
    },
	methods: {
    
		toPage2() {
    
			uni.navigateTo({
    
				url: '../page2/page2/page2'
			});
		},
		fun2() {
    
			console.log('hello');
			uni.navigateTo({
    
				url: '../page2/page2/page2'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
$width: 150px;
.listcard {
    
	border-bottom: 1px solid $uni-bg-color-grey;
	display: flex;
	padding: 10px;

	margin: 10px;
	border-radius: 5px;
	border-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.9);
	box-sizing: border-box;
	.listcard-image {
    
		width: 60px;
		height: 60px;
		border-radius: 5px;
		overflow: hidden;
		image {
    
			width: 100%;
			height: 100%;
		}
	}
	.listcard-content {
    
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 10px;
		width: 100%;
		font-size: 14px;

		line-height: 1.2;
		.listcard-content_title {
    
		}

		,
		.listcard-content_sum {
    
			font-size: 10px;
		}
		.listcard-content_des {
    
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			.listcard-content_des-money {
    
				padding: 0 5px;
				margin-right: 5px;
				border-radius: 15px;
				color: red;
				border: 1px solid red;
			}
		}
	}
}
</style>

对于布局的设计

最外层是 一个 flex 布局,左右两边 排列

右边的内容又是一个 flex布局
,显示竖直排列,设置 space-between 间隔开元素, 再调整一下 margin,padding的值,定位。

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43923045/article/details/107153603

智能推荐

用delphi写多屏幕程序_weixin_30879169的博客-程序员宅基地

http://blog.csdn.net/zyyjc/article/details/6530728别现在有些POS机是双屏幕的(比如卡西瓦POS机),一个屏幕可以当顾客显示屏用,当闲时也可以显示一些广告。其实用delphi写双屏幕的程序是比较简单的,Screen.MonitorCount就是当前系统屏幕的数量,TForm也有与屏幕相关的属性,比如DefaluMonitor,不...

mysql-binlog之我见_微尘的博客-程序员宅基地

    谈到mysql ,最为重要的日志就是binlog.MySQL提供了4种不同的日志,分别是错误日志(error log)、普通日志(general log)、慢日志(slow log)以及二进制日志(binlog)。1.错误日志(error log):记录了系统启动、运行以及停止过程中遇到的一些问题2.普通日志:记录了MySQL执行的所有语句以及语句开始执行的时间等信息,用户可以选择性打开它...

log4j 指定类的日志 输出到单独的文件_weixin_33928137的博客-程序员宅基地

为什么80%的码农都做不了架构师?&gt;&gt;&gt; ...

解决Linux系统 ping: sendmsg: Operation not permitted 问题_zouyongjin的专栏-程序员宅基地_ping sendmsg 不允许的操作

参考: http://heavendw.blog.51cto.com/695019/274392http://coffeecatcc.blog.51cto.com/3304373/609772http://ubuntuforums.org/showthread.php?t=812644  (如果是因为iptables问题可以参考)http://bbs.chinaunix.net

win2019服务器虚拟机,Window Server 2019 配置篇(3)- 建立hyper-v集群并在其上运行win10 pro虚拟机..._weixin_39732316的博客-程序员宅基地

上次讲到我们的域里有了网关跟DHCP,这次我们要在域中建立hyper-v集群并在其上运行win10 pro虚拟机那么什么是hyper-v集群呢?就是两个及两个以上的运行hyper-v服务的服务器建立的可以进行故障转移的集群除了这些,hyper-v上运行的虚拟机的虚拟盘也要运行在集群中iscsi的共享磁盘中,这样才能保证故障转移的可能性那么话不多说,我们建立三个虚拟机:hyper-v-1 ip 19...

随便推点

linux安装gnu,【GNU/Linux实战手记之安装配置篇】 (转)_飞上九天的博客-程序员宅基地

【GNU/Linux实战手记之安装配置篇】 (转)[@[email protected]]作者:叶魏彬 to::[email protected]"&gt;MSN:[email protected](C)Free Software Library.Org()本文依照 Free Document Lience发布,任何人都可以将本文原封不动的复制、转载,但请务必保留此声明。作者不对本文所导致的任何结果负...

图标文件ico制作以及使用说明_weixin_30654583的博客-程序员宅基地

  今天说一个图标文件——ico。我们在pc端浏览网页的时候网页栏那块都会显示一个本网站特有的图片,就是我们说的ico了。示例:&lt;link href="image/favicon.ico" rel="shortcut icon"/&gt; 这是放在head里面的一个link标签herf表明本地文件的ico。rel的属性是"shortcut icon"大多数的浏览器识别,shortcut将...

计算机网络的发展热点,计算机网络发展趋势(热点).ppt_王洛堇的博客-程序员宅基地

计算机网络发展趋势(热点)主要内容: 一、通信、网络的地位 二、计算机及其网络的形成和发展 三、计算机网络功能、结构和分类 四、网络协议体系-- OSI/RM模型 五、局域网 六、网络互联通信技术 七、 TCP/IP协议 八、网络安全和网络管理 九、通信、网络发展趋势 十、实例 二、计算机及网络发展历程 计算机的发展趋势 微型化、巨型化 网络化 多媒体 第五代计算机 2、计算机网络的...

GNN教程:开山之作GCN理解(自身和邻居节点Embedding聚合再进行非线性变换最后更新)_就是静静静吖-程序员宅基地_gcn聚合

转载目录大纲1. 问题定义2. 图上的快速卷积近似谱图卷积逐层线性模型3. 半监督学习节点分类传播公式解释后话参考文献本文为GNN教程的第二篇文章 【GCN介绍】,取自Kipf et al. 2017,文章中提出的模型叫Graph Convolutional Network(GCN),个人认为可以看作是图神经网络的“开山之作”,因为GCN利用了近似的技巧推导出了一个简单而高效的模型,使得图像处理中的卷积操作能够简单得被用到图结构数据处理中来,后面各种图神经网络层出

SpringBoot2集成Spock-Groovy测试框架从零开始_mt23-程序员宅基地_spock集成springboot

其他SpringBoot2集成Spock真的是千篇一律,而且一些细节问题还是比较多.花费了2个小时才集成完毕.此篇文章将会从maven导包开始,介绍如何集成Spock以及使用,如果有任何不足或问题之处请斧正.前言关于Groovy,Spock以及SpringBoot2测试本身的概念这里就不详细说了,资料也很多maven集成Spock,Groovy &lt;dependency&gt; ...

推荐文章

热门文章

相关标签