tnblog
首页
视频
资源
登录
愿你出走半生，归来仍是少年
博主信息
排名
3
文章
317
粉丝
22
评论
14
文章类别
最新文章
最新评价
bootstrap 栅格布局一小例子
剑轩 : 后端写样式有点痛苦哇
一点flex布局的运用
剑轩 : 后端写样式有点痛苦哇
vue.js常用指令
剑轩 : 可以可以，多总结一点
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

uni-app卡片效果，格子效果，list列表效果，一块一块的布局

17760人阅读 2022/1/14 17:18 总访问：2060265 评论：0 收藏：0 手机
分类: uniapp


官方文档地址：
https://ext.dcloud.net.cn/plugin?id=22
https://hellouniapp.dcloud.net.cn/pages/extUI/card/card
https://uniapp.dcloud.io/component/uniui/uni-card

官方demo位置：


部分效果：


代码：

  1. <template>

  2. 	<view>

  3. 		<text class="example-info">卡片组件通用来显示完整独立的一段信息，同时让用户理解他的作用。例如一篇文章的预览图、作者信息、时间等，卡片通常是更复杂和更详细信息的入口点。</text>

  4. 		<uni-section title="基础卡片" type="line"></uni-section>

  5. 		<view class="example-body">

  6. 			<uni-card @click="clickCard"><text class="content-box-text">这是一个基础卡片示例，内容较少，此示例不带边框阴影。</text></uni-card>

  7. 			<uni-card title="标题文字" isShadow @click="clickCard"><text class="content-box-text">这是一个基础卡片示例，内容比较多，内容样式可自定义，卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、时间等，此示例带边框阴影。</text></uni-card>

  8. 			<uni-card title="标题文字" extra="额外信息" isShadow note="Tips" @click="clickCard"><text class="content-box-text">这是一个相对比较完整的基础卡片示例，带有标题、额外信息以及底部信息，内容样式可自定义。</text></uni-card>

  9. 		</view>

  10. 		<uni-section title="通栏卡片" type="line"></uni-section>

  11. 		<view class="example-body">

  12. 			<view class="example-box">

  13. 				<uni-card title="标题文字" :isFull="true" isShadow='true' note="额外信息" extra="额外信息" @click="clickCard"><text class="content-box-text">通栏卡片，左右上下没有间距，用户可自定义卡片距离等信息</text></uni-card>

  14. 			</view>

  15. 		</view>

  16. 

  17. 		<uni-section title="图文卡片" type="line"></uni-section>

  18. 		<view class="example-body">

  19. 			<uni-card :is-shadow="true" title="标题文字" mode="style" thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" extra="额外信息" note="true" @click="clickCard">

  20. 				<text class="content-box-text">图文卡片支持传入一张图片，在最上方显示，标题作为图片描述，额外信息作为内容标题，通常作用为作者信息或发布时间描述，自行配置是否需要底部信息</text>

  21. 				<block slot="footer">

  22. 					<view class="footer-box">

  23. 						<view class="" @click.stop="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>

  24. 						<view class="" @click.stop="footerClick('评论')"><text class="footer-box__item">评论</text></view>

  25. 						<view class="" @click.stop="footerClick('分享')"><text class="footer-box__item">分享</text></view>

  26. 					</view>

  27. 				</block>

  28. 			</uni-card>

  29. 		</view>

  30. 		<uni-section title="标题卡片" type="line"></uni-section>

  31. 		<view class="example-body">

  32. 			<uni-card :isShadow="true" title="标题内容" subTitle="副标题" mode="title" thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" extra="技术没有上限" note="true" @click="clickCard">

  33. 				<view>

  34. 					<view class="image-box">

  35. 						<image class="image" mode="aspectFill" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg" />

  36. 					</view>

  37. 					<view class="content-box">

  38. 						<text class="content-box-text">标题卡片带有一个双标题头部，右侧为额外描述信息 ，内容可自定义实现</text>

  39. 					</view>

  40. 				</view>

  41. 				<template slot="footer">

  42. 					<view class="footer-box">

  43. 						<view @click.stop="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>

  44. 						<view @click.stop="footerClick('评论')"><text class="footer-box__item">评论</text></view>

  45. 						<view @click.stop="footerClick('分享')"><text class="footer-box__item">分享</text></view>

  46. 					</view>

  47. 				</template>

  48. 			</uni-card>

  49. 		</view>

  50. 	</view>

  51. </template>

  52. 

  53. <script>

  54. 	export default {

  55. 		components: {},

  56. 		data() {

  57. 			return {

  58. 				list: [{

  59. 					id: 0,

  60. 					title: '',

  61. 					content: '',

  62. 					shadow: false,

  63. 					note: '',

  64. 					extra: '',

  65. 					thumbnail: ''

  66. 

  67. 				}, {

  68. 					id: 1,

  69. 					title: '标题文字',

  70. 					content: '',

  71. 					shadow: true,

  72. 					note: '',

  73. 					extra: '额外信息',

  74. 					thumbnail: ''

  75. 				}, {

  76. 					id: 2,

  77. 					title: '标题文字',

  78. 					content: '',

  79. 					shadow: true,

  80. 					note: 'Tips',

  81. 					extra: '额外信息',

  82. 					thumbnail: ''

  83. 				}, {

  84. 					id: 3,

  85. 					title: '标题文字',

  86. 					content: '这是一个完整配置的基础卡片示例。内容样式可自定义。',

  87. 					shadow: true,

  88. 					note: 'Tips',

  89. 					extra: '额外信息',

  90. 					thumbnail: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'

  91. 				}],

  92. 				Tips: ['喜欢', '评论', '分享']

  93. 			}

  94. 		},

  95. 		methods: {

  96. 			clickCard() {

  97. 				uni.showToast({

  98. 					title: '点击卡片',

  99. 					icon: 'none'

  100. 				})

  101. 			},

  102. 			footerClick(types) {

  103. 				uni.showToast({

  104. 					title: types,

  105. 					icon: 'none'

  106. 				})

  107. 			}

  108. 		}

  109. 	}

  110. </script>

  111. 

  112. <style>

  113. 	@charset "UTF-8";

  114. 

  115. 	/* 头条小程序组件内不能引入字体 */

  116. 	/* #ifdef MP-TOUTIAO */

  117. 	@font-face {

  118. 		font-family: uniicons;

  119. 		font-weight: normal;

  120. 		font-style: normal;

  121. 		src: url("~@/static/uni.ttf") format("truetype");

  122. 	}

  123. 

  124. 	/* #endif */

  125. 	/* #ifndef APP-NVUE */

  126. 	page {

  127. 		display: flex;

  128. 		flex-direction: column;

  129. 		box-sizing: border-box;

  130. 		background-color: #efeff4;

  131. 		min-height: 100%;

  132. 		height: auto;

  133. 	}

  134. 

  135. 	view {

  136. 		font-size: 14px;

  137. 		line-height: inherit;

  138. 	}

  139. 

  140. 	.example {

  141. 		padding: 0 15px 15px;

  142. 	}

  143. 

  144. 	.example-info {

  145. 		padding: 15px;

  146. 		color: #3b4144;

  147. 		background: #ffffff;

  148. 	}

  149. 

  150. 	.example-body {

  151. 		/* #ifndef APP-NVUE */

  152. 		display: flex;

  153. 		/* #endif */

  154. 		flex-direction: row;

  155. 		flex-wrap: wrap;

  156. 		justify-content: center;

  157. 		padding: 0;

  158. 		font-size: 14px;

  159. 		background-color: #ffffff;

  160. 	}

  161. 

  162. 	/* #endif */

  163. 	.example {

  164. 		padding: 0 15px;

  165. 	}

  166. 

  167. 	.example-info {

  168. 		/* #ifndef APP-NVUE */

  169. 		display: block;

  170. 		/* #endif */

  171. 		padding: 15px;

  172. 		color: #3b4144;

  173. 		background-color: #ffffff;

  174. 		font-size: 14px;

  175. 		line-height: 20px;

  176. 	}

  177. 

  178. 	.example-info-text {

  179. 		font-size: 14px;

  180. 		line-height: 20px;

  181. 		color: #3b4144;

  182. 	}

  183. 

  184. 	.example-body {

  185. 		flex-direction: column;

  186. 		padding: 15px;

  187. 		background-color: #ffffff;

  188. 	}

  189. 

  190. 	.word-btn-white {

  191. 		font-size: 18px;

  192. 		color: #FFFFFF;

  193. 	}

  194. 

  195. 	.word-btn {

  196. 		/* #ifndef APP-NVUE */

  197. 		display: flex;

  198. 		/* #endif */

  199. 		flex-direction: row;

  200. 		align-items: center;

  201. 		justify-content: center;

  202. 		border-radius: 6px;

  203. 		height: 48px;

  204. 		margin: 15px;

  205. 		background-color: #007AFF;

  206. 	}

  207. 

  208. 	.word-btn--hover {

  209. 		background-color: #4ca2ff;

  210. 	}

  211. 

  212. 	.example-body {

  213. 		/* #ifndef APP-NVUE */

  214. 		display: block;

  215. 		/* #endif */

  216. 		padding: 1px 0;

  217. 	}

  218. 

  219. 	.example-box {

  220. 		margin: 12px 0;

  221. 	}

  222. 

  223. 	.image-box {

  224. 		/* #ifndef APP-NVUE */

  225. 		display: flex;

  226. 		flex-direction: column;

  227. 		/* #endif */

  228. 		height: 350rpx;

  229. 		overflow: hidden;

  230. 	}

  231. 

  232. 	.image {

  233. 		/* #ifndef APP-NVUE */

  234. 		width: 100%;

  235. 		height: 100%;

  236. 		/* #endif */

  237. 		flex: 1;

  238. 	}

  239. 

  240. 	.content-box {

  241. 		padding-top: 20rpx;

  242. 	}

  243. 

  244. 	.content-box-text {

  245. 		font-size: 12px;

  246. 		line-height: 22px;

  247. 	}

  248. 

  249. 	.footer-box {

  250. 		/* #ifndef APP-NVUE */

  251. 		display: flex;

  252. 		/* #endif */

  253. 		justify-content: space-between;

  254. 		flex-direction: row;

  255. 	}

  256. 

  257. 	.footer-box__item {

  258. 		align-items: center;

  259. 		padding: 2px 0;

  260. 		font-size: 12px;

  261. 		color: #666;

  262. 	}

  263. </style>


不同的显示效果类型可选：
mode="style"
mode="basic"
mode="title"

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

uni-app开始时间与结束时间（结束时间大于开始时间）picker编写
利用uni-app官网里面picker插件代码当点击开始时间后结束时间要大于选择后的开始时间，点击结束时间后开始时间要小于开始时...

uni-app用法与html标签的变化
以前是html标签，比如，现在是小程序组件，比如。那么标签和组件有什么区别，不都是用尖括号包围起来一段英文吗？其实标签...

uni-app无法导入插件
点击网页中右上角的插件导入，可以打开项目，但是就是无法导入插件。是因为，要登录！hbuilder里边也要登录才行，他这个应...

使用uni-app的云端一体插件
初次使用uni-app的云端一体插件步骤还是有点多，也有一些坑，在这里把使用过程记录一下。 一：先下载需要的插件在插件右上...

uni-app中list插件图标问题
如图：他使用uni-icons实现的如果只有text就不会有图标有时候贴的文档不是太完善，还是要下一个完整的插件来对比一下

uni-app发起请求
代码如下：uni.request({ url:&#39;接口地址&#39;, success:(result)=&gt;{ my.lists=result.data; } })注意你的...

uni-app官方文档
https://uniapp.dcloud.io/

uni-app运行与调试
上边有菜单，可以运行到浏览器，也可以运行到内置浏览器运行到内置浏览器的效果：

uni-app引入外部资源，引入外网样式
很简单代码如下：&lt;style&gt; @import&#39;http://image.tnblog.net/amazeui.min.css&#39;; &lt;/style&gt; &lt;st...

uni-app设置起始页
很简单，在pages.json里边配置即可。

uni-app页面无法跳转问题
首先检查一下有没有在pages里边配置没有配置不行的哦或者看看你的跳转方式对不对，如果跳转的是底部菜单，但是你用的是uni....

uni-app 删除失败 setting denied access to....
删除的时候如果文件夹下面还有页面，这样直接删除文件夹是会报错的：删除失败 setting denied access to....这种情况就直接...

uni-app中引入外部js
可以使用代码如下：varscript=document.createElement(&#39;script&#39;); script.src=&quot;http://image.tnblog.net/jqu...

uni-app dom操作
比如引入外部js需要用到的dom操作:varscript=document.createElement(&#39;script&#39;); script.src=&quot;http://image....

uni-app使用web-view引入页面
代码如下：&lt;template&gt; &lt;viewclass=&quot;h5-html&quot;&gt; &lt;web-view:webview-styles=&quot;webviewStyl...

uni-app真机调试
很简单只要手机开启了usb调试，然后hbuilderx会自动获取到手机的然后运行到手机即可华为手机开启use调试：一直点击版本号进...