uniapp 微信小程序之金額展示套餐

更新時間：2025年01月21日 10:40:39 作者：竣子好逑

文章介紹了uniapp微信小程序金額展示套餐的相關內(nèi)容,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧

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

//打賞
			async fun_reward(price) {
				//里面寫邏輯
			},

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

到此這篇關于uniapp 微信小程序金額展示套餐的文章就介紹到這了,更多相關uniapp 微信小程序金額展示套餐內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue elementUI實現(xiàn)拖拽流程圖效果
這篇文章主要為大家詳細介紹了如何通過vue elementUI實現(xiàn)拖拽流程圖效果,不引入插件,純手寫實現(xiàn),感興趣的小伙伴可以跟隨小編一起學習一下
2025-01-01
vue使用localStorage保存登錄信息適用于移動端、PC端
這篇文章主要為大家詳細介紹了vue使用localStorage保存登錄信息適用于移動端、PC端，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05
vue.js初學入門教程（1）
這篇文章主要為大家詳細介紹了vue.js初學入門教程,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
vue項目中使用ts（typescript）入門教程
最近項目需要將原vue項目結合ts的使用進行改造，本文從安裝到vue組件編寫進行了說明，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
Element樹形控件el-tree實現(xiàn)一鍵全選、反選功能
最近做的項目用到了全選全不選功能,于是就自己動手寫了一個,這篇文章主要給大家介紹了關于Element樹形控件el-tree實現(xiàn)一鍵全選、反選功能的相關資料,需要的朋友可以參考下
2023-10-10
vue-router4版本第一次打開界面不匹配路由問題解決
本文主要介紹了vue-router4版本第一次打開界面不匹配路由問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-04-04
vue中使用el-table組件checkbox進行分頁多選，回顯、切換分頁記住上一頁所勾選和取消的選項(示例代碼)
這篇文章主要介紹了vue中使用el-table組件checkbox進行分頁多選，回顯、切換分頁記住上一頁所勾選和取消的選項本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下
2022-12-12
Vue+vite創(chuàng)建項目關于vite.config.js文件的配置方法
Vue項目創(chuàng)建時，我們見過vue-cli 創(chuàng)建項目和webpack 創(chuàng)建項目等方式，這篇文章主要介紹了Vue+vite創(chuàng)建項目關于vite.config.js文件的配置方法,需要的朋友可以參考下
2023-06-06
vue-cli2.x舊版本卸載不掉的問題踩坑指南(附Vue腳手架安裝教程)
遇到一個Vuecli2腳手架卸載不了的問題,查了許多資料說的都比較復雜,所以下面這篇文章主要給大家介紹了關于vue-cli2.x舊版本卸載不掉的問題踩坑的相關資料,文中還附了Vue腳手架安裝教程,需要的朋友可以參考下
2022-07-07
VUE中使用Wavesurfer.js實現(xiàn)可視化音頻波形功能
這篇文章主要介紹了VUE中使用Wavesurfer.js實現(xiàn)可視化音頻波形功能的相關資料,通過npm安裝、創(chuàng)建組件、傳入音頻路徑參數(shù),并配置波紋顏色、大小等樣式屬性,需要的朋友可以參考下
2025-06-06