uniapp 微信小程序之金额展示套餐
作者:竣子好逑
文章介绍了uniapp微信小程序金额展示套餐的相关内容,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
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 微信小程序 金额展示套餐内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!