uniapp 微信小程序 金额展示套餐

html

html 复制代码
			<view class="gradelist">
							<view class="flex jsb ac">
								<text class="gradelisTitle">喜欢作者</text>
								<!-- <text class="gradelisOtherPrice" @click="otherPiceButton(1)">其他金额</text> -->
							</view>
							<view class="gradelis flex flexwrap">
								<view class="gradeli flex jc ac" v-for="(item,index) in rewardPriceList" :key="index"
									@click.stop="fun_reward(item)" >
									¥{{item}}</view>
							</view>
						</view>

js

javascript 复制代码
			//打赏
			async fun_reward(price) {
				//里面写逻辑
			},

css

css 复制代码
		.gradelist {
			padding: 30rpx;
			background: #f5f5f5;
			border-radius: 8rpx;
			box-sizing: border-box;
			border-radius: 12rpx;
			margin-top: 30rpx;

			.gradelisTitle {
				color: #999;
				font-size: 28rpx;

			}

			.gradelisOtherPrice {
				color: steelblue;
				font-size: 28rpx;

			}

			.gradelis {
				width: 100%;
				margin-top: 30rpx;
			}

			.gradeli {
				width: 31%;
				height: 100rpx;
				background: #fff;
				margin-right: 3%;
				border-radius: 8rpx;
				margin-bottom: 20rpx;
				font-size: 28rpx;
				font-weight: bold;
			}

			.gradeli:nth-child(3n+3) {
				margin-right: 0 !important;
			}

		}
相关推荐
流***陌25 分钟前
淘宝一番赏抽赏小程序:开启趣味抽赏新体验
小程序
说私域27 分钟前
开源链动2+1模式AI智能名片S2B2C商城小程序在竞争激烈的中低端面膜服装行业中的应用与策略
大数据·人工智能·小程序
_AaronWong1 小时前
一键搞定UniApp WiFi连接!这个Vue 3 Hook让你少走弯路
前端·微信小程序·uni-app
陈陈小白2 小时前
小程序如何接入火山引擎埋点数据
小程序·火山引擎
星光一影2 小时前
Java版小区物业管理系统/业主端/物业端/管理端/支持公众号、小程序、app
java·大数据·小程序
2501_915909069 小时前
tcpdump 抓包数据分析实战,命令、过滤、常见故障定位与真机补充流程
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
赵庆明老师14 小时前
Uniapp微信小程序开发:微信小程序支付功能后台代码
微信小程序·小程序·uni-app
曹申阳14 小时前
1. 使用VSCode开发uni-app环境搭建
ide·vscode·uni-app
雪芽蓝域zzs15 小时前
uniapp开发 APP嵌入另一个APP打包的wgt文件,实现点击携带参数跳转到wgtAPP的某一个页面
uni-app·apache
00后程序员张16 小时前
tcpdump 抓包分析,命令、过滤技巧、常见症状定位与移动真机补充方案
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump