uniapp 微信小程序之金额展示套餐
更新时间:2025年01月21日 10:40:39 作者:竣子好逑
文章介绍了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 微信小程序 金额展示套餐内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue-router beforeEach跳转路由验证用户登录状态
这篇文章主要介绍了vue-router beforeEach跳转路由验证用户登录状态,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-12-12
vue-router(this.$router)如何在新窗口打开路由跳转页面
这篇文章主要介绍了vue-router(this.$router)如何在新窗口打开路由跳转页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
Vue3 封装一个支持输入和单/多选InputSelect组件-Antd详解
Antd的Select组件默认不支持作为输入框使用或手动添加选项,为了实现这一功能,我们封装了一个通用组件,支持单选和多选模式,并允许用户在组件失焦时手动输入选项,主要通过定义searchText存储输入数据,感兴趣的朋友跟随小编一起看看吧2024-09-09


最新评论