mpvue3.0写单选

最新推荐文章于 2023-11-28 22:39:57 发布

ddydyt

最新推荐文章于 2023-11-28 22:39:57 发布

阅读量149

点赞数

分类专栏： VUE 文章标签：小程序

本文链接：https://blog.csdn.net/qq_39088411/article/details/115620048

版权

VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文档介绍了如何在微信小程序中修改默认tab样式，通过编写CSS类并使用iconfont图标，实现选中前后的不同效果。利用Vue的v-for指令动态渲染数据，并通过点击事件更新选中状态。代码中展示了如何根据接口数据设置选项，并控制选中项的样式切换。

摘要由CSDN通过智能技术生成

微信小程序的tab样式不符合 UI图样式，于是自己改写

1.准备radio样式，一共两种，一个是选中前，一个是选中后，传入iconfont的icon-oss里面的

选中前
选中后

2.写入两种图片的类,通过include 导入tab

.radio-btn {
  @include icon-oss('210330-choose-white');
}

.radio-btn-click {
  @include icon-oss('210330-choose-blue');
}

3.写html

<template v-for="item in kiloMeterRadio">
	<view
		:key="item"
		@click="choosedItem(item)">{{ item }}公里
			<view :class="{
                'radio-btn-click': checkedKiloNum === item,
                'radio-btn': checkedKiloNum !== item
            }"/>
    </view>
</template>

4.写方法

setup() {
	const checkedKiloNum = ref<number>(0)
	const choosedItem = (val: number) => {
	      checkedKiloNum.value = val
	}
	const kiloMeterRadio = computed(() => recommand.value.map(v => v.mileage))
	 //recommand是从接口拿到的数据,v.mileage则是所有公里数，赋值后kiloMeterRadio的值为 [1000, 2000, 3000]
	 return { checkedKiloNum, kiloMeterRadio }
}