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使用localStorage保存登录信息 适用于移动端、PC端
这篇文章主要为大家详细介绍了vue使用localStorage保存登录信息 适用于移动端、PC端,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2019-05-05
vue中使用el-table组件checkbox进行分页多选,回显、切换分页记住上一页所勾选和取消的选项(示例代码)
这篇文章主要介绍了vue中使用el-table组件checkbox进行分页多选,回显、切换分页记住上一页所勾选和取消的选项本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下2022-12-12
Vue+vite创建项目关于vite.config.js文件的配置方法
Vue项目创建时,我们见过vue-cli 创建项目和webpack 创建项目等方式,这篇文章主要介绍了Vue+vite创建项目关于vite.config.js文件的配置方法,需要的朋友可以参考下2023-06-06
vue-cli2.x旧版本卸载不掉的问题踩坑指南(附Vue脚手架安装教程)
遇到一个Vuecli2脚手架卸载不了的问题,查了许多资料说的都比较复杂,所以下面这篇文章主要给大家介绍了关于vue-cli2.x旧版本卸载不掉的问题踩坑的相关资料,文中还附了Vue脚手架安装教程,需要的朋友可以参考下2022-07-07
VUE中使用Wavesurfer.js实现可视化音频波形功能
这篇文章主要介绍了VUE中使用Wavesurfer.js实现可视化音频波形功能的相关资料,通过npm安装、创建组件、传入音频路径参数,并配置波纹颜色、大小等样式属性,需要的朋友可以参考下2025-06-06


最新评论