uniapp-vue3 实现, 一款带有丝滑动画效果的单选框组件,支持微信小程序、H5等多端

采用 uniapp-vue3 实现, 是一款带有丝滑动画效果的单选框组件,提供点状、条状的动画过渡效果,支持多项自定义配置,适配 web、H5、微信小程序(其他平台小程序未测试过,可自行尝试)

可到插件市场下载尝试: https://ext.dcloud.net.cn/plugin?id=21740

  • 使用示例




  • 示例代码
javascript 复制代码
<template>
	<view>
		<view class="light" style="background-color: white">
			<view>
				<view class="flex-center">默认样式</view>
				<wo-radio-hopping></wo-radio-hopping>
			</view>
		</view>
		<view class="light" style="background-color: white">
			<view class="flex-center">数据集、默认选中、选中事件</view>
			<wo-radio-hopping v-model:options="state.items" v-model:defaultValue="state.default" @on-change="changeEvent"></wo-radio-hopping>
		</view>
		<view class="light" style="background-color: white">
			<view>
				<view class="flex-center">条状动画</view>
				<wo-radio-hopping :lineAnimation="true"></wo-radio-hopping>
			</view>
		</view>
		<view class="light" style="background-color: white">
			<view>
				<view class="flex-center">主题色</view>
				<wo-radio-hopping :primary="'#55bc8a'"></wo-radio-hopping>
			</view>
		</view>
		<view class="light" style="background-color: white">
			<view>
				<view class="flex-center">方框</view>
				<wo-radio-hopping :circle="false"></wo-radio-hopping>
			</view>
		</view>
		<view class="light" style="background-color: white">
			<view>
				<view class="flex-center">选择框样式(通过css的box-shadow属性去设置)</view>
				<wo-radio-hopping :frameBoxShadow="''"></wo-radio-hopping>
				<wo-radio-hopping :frameBoxShadow="'0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 1px rgba(0, 0, 0, 0.2) inset'"></wo-radio-hopping>
			</view>
		</view>
		<view class="light" style="background-color: white">
			<view style="padding: 0 20px;">
				<view class="flex-center">插槽自定义内容</view>
				<wo-radio-hopping v-model:options="state.items" v-slot="slotProps" @on-change="changeEvent">
					<view style="display: flex; justify-content: space-between;padding: 10px;">
						<view>{{ slotProps.data.label }}</view>
						<view class="tag">{{ slotProps.data.tag }}</view>
					</view>
				</wo-radio-hopping>
			</view>
		</view>
		<view class="dark">
			<view>
				<view class="flex-center">暗黑模式</view>
				<wo-radio-hopping v-model:options="state.items" v-slot="slotProps" @on-change="changeEvent">
					<view style="display: flex; justify-content: space-between;">
						<view>{{ slotProps.data.label }}</view>
						<view class="tag">{{ slotProps.data.tag }}</view>
					</view>
				</wo-radio-hopping>
			</view>
		</view>
	</view>
	
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	const state = reactive({
	  items: [{
				value: '1',
				label: '苹果味',
				tag: '饮料'
			},
			{
				value: '2',
				label: '香蕉味',
				tag: '酒水'
			},
			{
				value: '3',
				label: '火龙果味',
				tag: '饮料'
			},
			{
				value: '4',
				label: '西瓜味',
				tag: '饮料'
			},
			{
				value: '5',
				label: '哈密瓜味',
				tag: '酒水'
			},
			{
				value: '6',
				label: '榴莲味',
				tag: '酒水'
		}],
		default: '4',
	});
	const changeEvent = (el) => {
		console.log('点击:', el);
	}
</script>

<style lang="scss" scoped>
	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.light {
		border-radius: 10px;
		padding: 20rpx;
		font-size: 24rpx;
		background-color: hsl(223,90%,90%);
		overflow: auto;
	}
	.dark {
		border-radius: 10px;
		padding: 20rpx;
		font-size: 24rpx;
		background-color: hsl(223,90%,10%);
		color: white;
		overflow: auto;
	}
	.tag {
		background-color: #1BA035;
		color: white;
		font-size: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4px;
		padding: 0 4px;
	}
</style>
相关推荐
清风絮柳6 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
说私域6 小时前
基于开源AI大模型与S2B2C模式的线下服务型门店增长策略研究——以AI智能名片与小程序源码技术为核心
大数据·人工智能·小程序·开源
小程序照片合成8 小时前
uniapp微信小程序开发工具本地获取指定页面二维码
微信小程序·小程序·uniapp·二维码
低代码布道师8 小时前
加油站小程序实战教程05活动管理
低代码·小程序
教练 我想学编程8 小时前
学习记录706@微信小程序+springboot项目 真机测试 WebSocket错误: {errMsg: Invalid HTTP status.}连接不上
spring boot·学习·微信小程序
程序猿看视界11 小时前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
清晨細雨11 小时前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送
_未知_开摆11 小时前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
Li_na_na0111 小时前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5
橘猫云计算机设计12 小时前
基于django优秀少儿图书推荐网(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·python·小程序·django·毕业设计