快捷導(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue3組件渲染前的初始化過程
Vue3?中一個(gè)組件從創(chuàng)建到掛在,會經(jīng)過3個(gè)重點(diǎn)步驟：創(chuàng)建組件實(shí)例,設(shè)置組件實(shí)例,創(chuàng)建并執(zhí)行帶副作用的渲染函數(shù),本文將著重講清?創(chuàng)建組件實(shí)例、設(shè)置組件實(shí)例?這兩個(gè)過程都做了什么,這部分邏輯很簡單,但你會從中學(xué)習(xí)到?Vue?優(yōu)秀的實(shí)踐技巧,需要的朋友可以參考下
2024-07-07
Vue實(shí)現(xiàn)天氣預(yù)報(bào)小應(yīng)用
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)天氣預(yù)報(bào)小應(yīng)用，查詢一些城市的天氣情況，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
vue子元素綁定的事件, 阻止觸發(fā)父級上的事件處理方式
這篇文章主要介紹了vue子元素綁定的事件, 阻止觸發(fā)父級上的事件處理方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue-router beforeEach跳轉(zhuǎn)路由驗(yàn)證用戶登錄狀態(tài)
這篇文章主要介紹了vue-router beforeEach跳轉(zhuǎn)路由驗(yàn)證用戶登錄狀態(tài),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
vue簡單實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了vue簡單實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-03-03
繪制flowable?流程圖的Vue?庫使用詳解
這篇文章主要為大家介紹了繪制flowable?流程圖的Vue?庫使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
使用van-picker?動態(tài)設(shè)置當(dāng)前選中項(xiàng)
這篇文章主要介紹了使用van-picker?動態(tài)設(shè)置當(dāng)前選中項(xiàng)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue-router(this.$router)如何在新窗口打開路由跳轉(zhuǎn)頁面
這篇文章主要介紹了vue-router(this.$router)如何在新窗口打開路由跳轉(zhuǎn)頁面問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12
Vue body樣式修改方式
這篇文章主要介紹了Vue body樣式修改方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue3?封裝一個(gè)支持輸入和單/多選InputSelect組件-Antd詳解
Antd的Select組件默認(rèn)不支持作為輸入框使用或手動添加選項(xiàng),為了實(shí)現(xiàn)這一功能,我們封裝了一個(gè)通用組件,支持單選和多選模式,并允許用戶在組件失焦時(shí)手動輸入選項(xiàng),主要通過定義searchText存儲輸入數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧
2024-09-09