快捷導(dǎo)航

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

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