uni-app中兴趣标签选择

因项目需求,研发了基于uni-app微信小程序的标签选择,支持多选,最多选8个。 使用步骤: 一. 在项目根目录新建components,将drag-ball组件放入该目录 二. 在需要用到的页面引入该组件即可。

ps: 该组件还可以优化,请看到的大佬有兴趣帮忙优化, 方便更多的开发者。谢谢大家了! 有兴趣加个好友,交流web前端技术,加群:648802995 !我本人联系方式 19807198428, 微信同号!

组件引用

import dragBall from’…/…/componets/drag-ball/drag-ball.vue’;

export default{

components:{dragBall},

data() {

return{onInit:[{“x”:79.45049232358554,“y”:123.96125634387865,“radius”:30,“color”:["#787878","’#25AEBF’"],“colse”:false,“size”:“10”,“floating”:[0,false],“name”:“高富帅”},{“x”:198.76606872737423,“y”:79.28588367513791,“radius”:30,“color”:["#787878","#25AEBF"],“colse”:false,“size”:“10”,“floating”:[0,false],“name”:“琼瑶”},{“x”:290.5796037054993,“y”:108.66399668264214,“radius”:40,“color”:["#787878","#25AEBF"],“colse”:false,“size”:“15”,“floating”:[0,false],“name”:“选择困难症”},{“x”:152.08387466634375,“y”:132.84566053159986,“radius”:40,“color”:["#787878","#25AEBF"],“colse”:false,“size”:“15”,“floating”:[0,false],“name”:“背包客”},{“x”:222.67202922307413,“y”:134.93094592803268,“radius”:30,“color”:["#787878","#25AEBF"],“colse”:false,“size”:“10”,“floating”:[0,false],“name”:“非洲酋长”},{“x”:287.6493903164786,“y”:188.97865661799298,“radius”:40,“color”:["#787878","#25AEBF"],“colse”:false,“size”:“15”,“floating”:[0,false],“name”:“轻音乐”},{“x”:107.73067038886846,“y”:187.2797271941687,“radius”:30,“color”:["#787878","#25AEBF"],“colse”:false,“size”:“10”,“floating”:[0,false],“name”:“烘焙”}],colse:false,x:320 }},

onLoad() { },

methods:{

click(){

this.colse=true

this.x=0;

},

click_(index){ }

组件参数

属性名类型说明

xNumber球初始X轴

yNumber球初始Y轴

radiusNumber球的半径

colorArray[初始颜色,变化颜色]

colseBoolean球颜色初始设定

sizeString文字大小(最好为球的radius一半)

floatingArray[0,false]

nameString球里的字.

项目效果图:
在这里插入图片描述

项目github直通车:https://github.com/zengpanzp/uni-app

uni-app的Dcloud插件市场地址:http://ext.dcloud.net.cn/plugin?id=557

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值