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 微信小程序 金额展示套餐内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3组件渲染前的初始化过程

    Vue3组件渲染前的初始化过程

    Vue3 中一个组件从创建到挂在,会经过3个重点步骤:创建组件实例,设置组件实例,创建并执行带副作用的渲染函数,本文将着重讲清 创建组件实例、设置组件实例 这两个过程都做了什么,这部分逻辑很简单,但你会从中学习到 Vue 优秀的实践技巧,需要的朋友可以参考下
    2024-07-07
  • Vue实现天气预报小应用

    Vue实现天气预报小应用

    这篇文章主要为大家详细介绍了Vue实现天气预报小应用,查询一些城市的天气情况,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue子元素绑定的事件, 阻止触发父级上的事件处理方式

    vue子元素绑定的事件, 阻止触发父级上的事件处理方式

    这篇文章主要介绍了vue子元素绑定的事件, 阻止触发父级上的事件处理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue-router beforeEach跳转路由验证用户登录状态

    vue-router beforeEach跳转路由验证用户登录状态

    这篇文章主要介绍了vue-router beforeEach跳转路由验证用户登录状态,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue简单实现转盘抽奖

    vue简单实现转盘抽奖

    这篇文章主要为大家详细介绍了vue简单实现转盘抽奖,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 绘制flowable 流程图的Vue 库使用详解

    绘制flowable 流程图的Vue 库使用详解

    这篇文章主要为大家介绍了绘制flowable 流程图的Vue 库使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 使用van-picker 动态设置当前选中项

    使用van-picker 动态设置当前选中项

    这篇文章主要介绍了使用van-picker 动态设置当前选中项方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue-router(this.$router)如何在新窗口打开路由跳转页面

    vue-router(this.$router)如何在新窗口打开路由跳转页面

    这篇文章主要介绍了vue-router(this.$router)如何在新窗口打开路由跳转页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • Vue body样式修改方式

    Vue body样式修改方式

    这篇文章主要介绍了Vue body样式修改方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue3 封装一个支持输入和单/多选InputSelect组件-Antd详解

    Vue3 封装一个支持输入和单/多选InputSelect组件-Antd详解

    Antd的Select组件默认不支持作为输入框使用或手动添加选项,为了实现这一功能,我们封装了一个通用组件,支持单选和多选模式,并允许用户在组件失焦时手动输入选项,主要通过定义searchText存储输入数据,感兴趣的朋友跟随小编一起看看吧
    2024-09-09

最新评论