uniapp——图片下加文字，卡片，阴影，图标--文字--箭头（个人中心）

最新推荐文章于 2024-05-11 22:38:58 发布
最新推荐文章于 2024-05-11 22:38:58 发布
阅读量1.3w 收藏 94
点赞数 29
分类专栏： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wy313622821/article/details/110496538
版权

1、图片下加文字

效果图：
在这里插入图片描述
template代码

<view class="view-box">
	<image class="icon" src="../../static/logo.png"></image>
	<text class="title">收藏</text>
</view>

style代码

.view-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
	}

	.icon {
		width: 7vw;
		height: 7vw;
	}

	.title {
		margin-top: 10rpx;
		font-size: 20upx;
		/* color: #8f8f94; */
	}

2、卡片、阴影

a、效果图：
在这里插入图片描述
style代码

.box {
		width: 96%;
		/* padding: 0 3%; */
		height: 22vw;
		background-color: #fefefe;
		border-radius: 24upx;
		/*  阴影 */
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
		margin: 40upx 2% 0upx 2%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

阴影说明：
在这里插入图片描述

b、复杂结构，效果图：
在这里插入图片描述
template代码

<view class="box">
			<view class="label" v-for="(row,index) in orderTypeLise" :key="row.name" hover-class="hover" @tap="toOrderType(index)">
				<view class="icon">
					<view class="badge" v-if="row.badge>0">{{row.badge}}</view>
					<image :src="'../../static/'+row.icon"></image>
				</view>
				<!-- <text>{{row.name}}</text> -->
				{{row.name}}
			</view>
		</view>

script代码

data() {
			return {
				orderTypeLise: [
					//name-标题 icon-图标 badge-角标
					{
						name: '待付款',
						icon: 'l1.png',
						badge: 1
					},
					{
						name: '待发货',
						icon: 'l2.png',
						badge: 2
					},
					{
						name: '待收货',
						icon: 'l3.png',
						badge: 6
					},
					{
						name: '待评价',
						icon: 'l4.png',
						badge: 9
					},
					{
						name: '退换货',
						icon: 'l5.png',
						badge: 0
					}
				],

		},

style代码 (需要在style里加入 lang=“scss” )

//注意：需要<style lang="scss">
// 圆角长框
	.box {
		width: 96%;
		height: 22vw;
		background-color: #fefefe;
		border-radius: 24upx;
		/*  阴影 */
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
		margin: 40upx 2% 0upx 2%;
		display: flex;
		align-items: center;
		justify-content: center;

		// 包含图片，数字气泡，图标的view
		.label {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 16vw;
			color: #666666;
			font-size: 26upx;

			.icon {
				position: relative;
				width: 7vw;
				height: 7vw;
				margin: 0 1vw 2vw 1vw;

				// 数字气泡
				.badge {
					position: absolute;
					width: 4vw;
					height: 4vw;
					background-color: #ec6d2c;
					top: -1vw;
					right: -1vw;
					border-radius: 100%;
					font-size: 20upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 10;
				}

				// 文字上的图片
				image {
					width: 7vw;
					height: 7vw;
					z-index: 9;
				}
			}
		}

	}

3、图标–文字–箭头

效果图：
在这里插入图片描述
template代码

<view class='container_4'>
			<view class='middle-item' hover-stay-time="150">
				<image class="image_tupian_1" src="../../static/point.png"></image>
				<text class='text_2'>设置</text>
				<image class="image-jiantou" src="../../static/to.png"></image>
			</view>

			<view class="view_line"></view>

			<view class='middle-item' hover-class="opcity" hover-stay-time="150">
				<image class="image_tupian_1" src="../../static/choujiang.png"></image>
				<text class='text_2'>个人信息</text>
				<image class="image-jiantou" src="../../static/to.png"></image>
			</view>

			<view class="view_line"></view>

			<view class='middle-item' hover-class="opcity" hover-stay-time="150">
				<image class="image_tupian_1" src="../../static/mingxi.png"></image>
				<text class='text_2'>消费记录</text>
				<image class="image-jiantou" src="../../static/to.png"></image>
			</view>

		</view>

style代码

.container_4 {
		width: 96%;
		height: 320rpx;
		display: flex;
		flex-direction: column;
		border-radius: 15rpx;
		background-color: #FFFFFF;
		margin: 20rpx 2% 100rpx 2%;
	}

	.middle-item {
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.image_tupian_1 {
		display: flex;
		width: 50rpx;
		height: 50rpx;
		margin: 0rpx 20rpx 0rpx 40rpx;
	}

	.image-jiantou {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		/* 要约束所在位置的子元素的位置要设置成绝对 */
		right: 30rpx;
		/* 靠右调节 */
		margin-right: 35rpx
	}

	/* 线 */
	.view_line {
		width: 90%;
		height: 5rpx;
		background: #f3f3f3;
		/* margin: 0rxp 5% 0rxp 5%; */
		margin: 0 auto;
		text-align: center;
	}

4、个人中心

在这里插入图片描述

代码

<template>
	<view class="content">
		<!-- 第一部分 -->
		<view class="header" v-bind:class="{'status':isH5Plus}">
			<view class="userinfo">
				<view class="face">
					<image :src="userinfo.face"></image>
				</view>
				<view class="info">
					<view class="username">{{userinfo.username}}</view>
					<view class="integral">积分:{{userinfo.integral}}</view>
				</view>
			</view>
			<view class="setting">
				<image src="../../static/setting.png"></image>
			</view>
		</view>

		<!-- 第二部分 -->
		<view class="container_2">
			<view class="box">
				<view class="label" v-for="(row,index) in orderTypeLise" :key="row.name" hover-class="hover" @tap="toOrderType(index)">
					<view class="icon">
						<view class="badge" v-if="row.badge>0">{{row.badge}}</view>
						<image :src="'../../static/'+row.icon"></image>
					</view>
					<!-- <text>{{row.name}}</text> -->
					{{row.name}}
				</view>
			</view>
		</view>


		<!-- 第三部分 -->
		<view class='container_4'>
			<view class='middle-item' hover-stay-time="150">
				<image class="image_tupian_1" src="../../static/point.png"></image>
				<text class='text_2' style="color: #555555;">设置</text>
				<image class="image-jiantou" src="../../static/to.png"></image>
			</view>

			<view class="view_line"></view>

			<view class='middle-item' hover-class="opcity" hover-stay-time="150">
				<image class="image_tupian_1" src="../../static/choujiang.png"></image>
				<text class='text_2' style="color: #555555;">个人信息</text>
				<image class="image-jiantou" src="../../static/to.png"></image>
			</view>

			<view class="view_line"></view>

			<view class='middle-item' hover-class="opcity" hover-stay-time="150">
				<image class="image_tupian_1" src="../../static/mingxi.png"></image>
				<text class='text_2' style="color: #555555;">消费记录</text>
				<image class="image-jiantou" src="../../static/to.png"></image>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//#ifdef APP-PLUS
				isH5Plus: true,
				//#endif
				//#ifndef APP-PLUS
				isH5Plus: false,
				//#endif
				userinfo: {},

				orderTypeLise: [
					//name-标题 icon-图标 badge-角标
					{
						name: '待付款',
						icon: 'l1.png',
						badge: 1
					},
					{
						name: '待发货',
						icon: 'l2.png',
						badge: 3
					},
					{
						name: '待收货',
						icon: 'l3.png',
						badge: 5
					},
					{
						name: '待评价',
						icon: 'l4.png',
						badge: 7
					},
					{
						name: '退换货',
						icon: 'l5.png',
						badge: 0
					}
				],
			}
		},
		onLoad() {
			//加载
			this.init();
		},
		methods: {
			init() {
				//用户信息
				this.userinfo = {
					face: '../../static/face.jpg',
					username: "VIP管理员",
					integral: "2125"
				}
			},
			//用户点击订单类型
			toOrderType(index) {
				uni.showToast({
					title: this.orderTypeLise[index].name
				});
			},
			//用户点击列表项
			// toPage(list_i, li_i) {
			// 	uni.showToast({
			// 		title: this.severList[list_i][li_i].name
			// 	});
			// }

		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		background-color: #e9e9ef;
	}

	/* 第一部分 */
	.header {
		background-color: #76cee1;
		width: 92%;
		height: 30vw;
		padding: 0 4%;
		display: flex;
		align-items: center;

		.userinfo {
			width: 90%;
			display: flex;

			.face {
				flex-shrink: 0;
				width: 15vw;
				height: 15vw;

				image {
					width: 100%;
					height: 100%;
					border-radius: 100%
				}
			}

			.info {
				display: flex;
				flex-flow: wrap;
				padding-left: 30upx;

				.username {
					width: 100%;
					color: #fff;
					font-size: 40upx
				}

				.integral {
					display: flex;
					align-items: center;
					padding: 0 20upx;
					height: 40upx;
					color: #fff;
					background-color: rgba(0, 0, 0, 0.1);
					border-radius: 20upx;
					font-size: 24upx
				}
			}
		}

		.setting {
			flex-shrink: 0;
			width: 6vw;
			height: 6vw;

			image {
				width: 100%;
				height: 100%
			}
		}
	}

	/* 第二部分 */
	.container_2 {
		// 改变这里看效果，可以知道布局
		background-color: #76cee1;
		width: 100%;
		height: 11vw;
		// padding: 0 2%;
		margin-bottom: calc(11vw + 20upx);
		display: flex;
		align-items: flex-start;
		// 弯曲的弧度，可以改变100%的数值来看效果
		border-radius: 0 0 40rpx 40rpx;

		// 圆角长框
		.box {
			width: 96%;
			height: 22vw;
			background-color: #fefefe;
			border-radius: 24upx;
			/*  阴影 */
			box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
			margin: 0upx 2% 0upx 2%;
			display: flex;
			align-items: center;
			justify-content: center;

			// 包含图片，数字气泡，图标的view
			.label {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 16vw;
				color: #666666;
				font-size: 26upx;

				.icon {
					position: relative;
					width: 7vw;
					height: 7vw;
					margin: 0 1vw 2vw 1vw;

					// 数字气泡
					.badge {
						position: absolute;
						width: 4vw;
						height: 4vw;
						background-color: #ec6d2c;
						top: -1vw;
						right: -1vw;
						border-radius: 100%;
						font-size: 20upx;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 10;
					}

					// 文字上的图片
					image {
						width: 7vw;
						height: 7vw;
						z-index: 9;
					}
				}
			}
		}
	}

	/* 第三部分 */
	.container_4 {
		width: 96%;
		height: 320rpx;
		display: flex;
		flex-direction: column;
		border-radius: 15rpx;
		background-color: #FFFFFF;
		margin: 0rpx 2% 100rpx 2%;
	}

	.middle-item {
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.image_tupian_1 {
		display: flex;
		width: 50rpx;
		height: 50rpx;
		margin: 0rpx 20rpx 0rpx 40rpx;
	}

	.image-jiantou {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		/* 要约束所在位置的子元素的位置要设置成绝对 */
		right: 30rpx;
		/* 靠右调节 */
		margin-right: 35rpx
	}

	/* 线 */
	.view_line {
		width: 90%;
		height: 5rpx;
		background: #f3f3f3;
		/* margin: 0rxp 5% 0rxp 5%; */
		margin: 0 auto;
		text-align: center;
	}
</style>

里面的图标我就不放出来了，大家到网上下载自己喜欢的

wy313622821
关注
  • 29
    点赞
  • 踩
  • 94
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
uniapp小程序通过canvas给图片叠加自定义文字
_小郑有点困了的博客
12-28 2820
本想试试项目的图片是否可以，但是似乎是不行的，测试使用static目录下的某张图片，但是图片是加载失败的，可能是方式不对。创建canvas，绑定上一步的临时路径，就已经可以看到canvas画出来的图片上面有文字了。提到的前端给图片叠加文字水印的操作。比如想要一张照片上，叠加上自定义的文字。,把在线图片加载出来，拿到临时路径。
react-native-image-marker：在图片中添加文字或图标水印
02-05
React本机图像标记 在图像中添加文字或图标水印样品安装RN版本<0 xss=removed> ' ../node_modules/react-native-image-marker 'API 名称参数返回解密markText TextMarkOption Promise<String> 用文字标记
uniapp canvas 图片加上文字合成一张新图并保存到手机相册
qq_43513271的博客
04-20 4678
uniapp canvas 图片加上文字合成一张新图并保存到手机相册 背景图上是奖章徽章,中间加上自定义文本,我这个图是因为背景图上原来就有字,随便找的,所以跟我写的文字层叠了 具体实现代码 <template> <view class="box"> <view class="box-title"> <view class="box-title_left"> {{'金奖'}} </view> 人员: <v
uniapp实现页面轮播图及轮播图上的文字显示
最新发布
m0_74289031的博客
05-11 724
实现轮播图的方法
uniapp 上传图片与文字
weixin_38946164的博客
10-15 2708
前端效果图： 文件结构： imgup.vue 代码 <template> <view> <view class='pages'> <view class='father_view'> <view class='son_view'> <view class="title-bg">请描述质量问题(最多120个汉字)：</view> <textarea class
uni-app canvas绘制图片和文字
Dream_Fever的博客
11-19 7766
canvas画布 前言 前一段时间我们老师让我写一个关于画布功能的一个小demo，刚开始我是不太了解这个画布的，后来各种百度搜索了一下，才了解了一点点，话不多说，上代码 写画布的时候首先要在页面上写上这个，设置的宽高以及画布id <view class="indeximg"> <canvas style="width: 100%;height: 450px; " canvas-id="firstCanvas"></canvas> </view> 在c
uniapp子绝父相实现图片上放文字，文体超出图片位置，盒子设置高度
Ann_52547的博客
10-31 1436
子绝父相
Anime-js全屏酷炫字母文字切换动画特效.zip
07-11
Anime.js全屏酷炫字母文字切换动画特效，点击左右箭头按钮切换查看各种文字切换效果，都非常漂亮！ 引入js文件 [removed][removed] [removed][removed] [removed][removed]
swift-CJPDrawingBoard提供截屏涂鸦箭头文字矩形椭圆功能；
08-15
CJPDrawingBoard 提供截屏，涂鸦，箭头，文字，矩形，椭圆功能；
行业资料-建筑装置-带指示箭头的书签.zip
09-03
行业资料-建筑装置-带指示箭头的书签.zip
行业资料-建筑装置-带横向箭头指示的书签.zip
08-18
行业资料-建筑装置-带横向箭头指示的书签.zip
uniapp修改微信头像加边框加文字
07-11
uniapp修改微信头像加边框加文字
uni-app APP,H5图片上传添加文字水印，图片只显示左上角bug(H5,安卓App可用，其他暂未测试)
小兮博客
10-11 1354
uni-app 图片上传添加文字水印，图片只显示左上角bug(H5,安卓App可用，其他暂未测试)
uni-app添加字体图标
qq_33871182的博客
04-02 1724
在iconfont阿里巴巴矢量图标库下载图标 1、通过工具fontcreator把字体图标添加到uni.ttf 2、修改uni-icons文件下icons.js，根据规则进行添加新增字体 3、把ttf文件转换成base64文件编码 4、打开下载后的base64文件编码，提取路径 4、替换uni-icons文件下uni-icons.vue文件的字体路径 ...
#vue# #uni-app# 使用定位实现文字在图片上显示，且左右滑动（附源码）
ZHENGCHUNJUN的博客
10-15 6410
思路： （1）排版：使用弹性布局，将页面排列出来，再用v-for循环出来 （2）在最大的盒子加overflow-x: scroll; 达到左右滑动 （3）使用定位（子绝父相）让文字显示在图片上面 源码如下： <template> <view> <!-- 挑战活动版块 --> <view class="examine"> <view class="examine-item" v-for="(item,index) in exam
uniapp实现微信小程序图片预览以及复制文字
weixin_45389051的博客
09-23 895
首先说图片预览这个demo <image src="src的地址" mode="widthFix" @tap="_previewImage(src的地址)"></image> methods:{ _previewImage(image){ let imgArr = []; imgArr.push(image); //预览图片 uni.previewImage({ urls: imgArr, current: imgArr[0]
uni-app 实现图文混排
hjh70983704的博客
08-24 2217
今天淦我的小组比赛项目的时候碰到了一个问题 因为我做这个比赛项目之前打的前端都是h5的，而这个比赛项目是做移动端的，所以就一直用h5的写法在写，但是很多东西h5有的app是没有的，就比如我今天用到的document.createElement()，在HBuliderX里测试好好的，一上真机，直接报错，然后没办法，只能换方法，但是app的内容我又没学多少，所以就只能摸，结果花了3个小时才摸出来... 实现：点开一片文章显示详情，所以这个布局用在详情页，可以实现简单的图文混排 布局部分： <vi
uni-app的canvas设置文字居中对齐center
weixin_47753939的博客
02-23 2482
重点：ctx.fillText()的第二个参数是你画布canvas的宽度，不然不能居中对齐！！！！！！！！！！！！ ctx.setTextAlign('center') ctx.fillText('文字', canvas总宽度px, y轴位置px)
uibutton图片在上，文字在下。 图片在左 文字在右
weixin_30820151的博客
09-30 153
//文字在左，图片在右 CGFloat imageWidth = self.button.imageView.frame.size.width; CGFloat labelWidth = self.button.titleLabel.frame.size.width; self.button.imageEdgeInsets = UIEdgeInsetsM...
uniapp设置图片下面加字
06-08
要在uniapp中设置图片下面加字，可以使用以下方法： 1. 在页面中添加一个图片和一个文本组件。 2. 将图片和文本组件放在一个容器中，如view组件。 3. 设置图片的src属性和文本组件的内容。 4. 使用CSS样式将文本组件放置在图片下面，可以使用绝对定位等方式来实现。 示例代码如下： ``` <view class="container"> <image src="/static/img.png" mode="aspectFit"></image> <text class="text">这是一段文本</text> </view> <style> .container { position: relative; /* 容器设置为相对定位 */ } .text { position: absolute; /* 文本设置为绝对定位 */ bottom: 0; /* 将文本放置在图片下面 */ left: 0; width: 100%; text-align: center; } </style> ``` 这样就可以实现在图片下面加入一段文本了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wy313622821

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值