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;
			}

		}
相关推荐
破无差5 小时前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张6 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬7 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106327 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq8 小时前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app
Qlittleboy8 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
写代码的jiang8 小时前
打造精简高效的 uni-app 网络请求工具
uni-app
亮子AI8 小时前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220699 小时前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld9 小时前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐