直播平台发现组件、艺人动态展示、点击切换艺人-阿里西西

直播平台发现组件、艺人动态展示、点击切换艺人

直播平台发现组件使用步骤：

1. 查找插件

进入插件市场：打开 HBuilderX 编辑器，点击菜单栏中的 “插件” -> “插件市场”，或者直接访问uni-app 插件市场官网。搜索插件：在插件市场的搜索框中输入关键词，查找本插件，比如搜索 “小程序对接视频号” 。筛选插件：筛选出小程序对接视频号插件。

2. 安装插件

方式一：在 HBuilderX 中安装在插件市场找到目标插件后，点击进入插件详情页。点击 “使用 HBuilderX 导入插件” 按钮（如果是免费插件，直接导入；如果是付费插件，需要先购买）本插件是免费免费的喽。选择要导入插件的 uni-app 项目，确认导入。导入成功后，插件会被放置在项目的 uni_modules 目录下。方式二：通过命令行安装（适用于发布到 npm 的插件）打开命令行工具，进入你的 uni-app 项目根目录。执行 npm install 插件名称命令，例如 npm install my-uniapp-plugin 。安装完成后，同样可以在项目的 uni_modules 目录下找到该插件。

3. 引入插件

 
ini
体验AI代码助手
代码解读
复制代码

<liveStreamDiscoverVue :centerAvatar="centerAvatar":centerName="centerName":circleItems="circleItems" :bottomNavs="bottomNavs" />

4 在测试项目中加入数据，可以根据需要从后台获取,增加动画处理函数。

const centerAvatar = ref('/static/discover/1.png');const centerName = ref('柳欢欢');const circleItems = ref([{            type: 'avatar',            src: '/static/discover/2.png',            name: 'Jimly',            active: false,            x: 0,            y: -210,            yOffset: 0        },        {            type: 'avatar',            src: '/static/discover/3.png',            name: '李妮娜',            active: false,            x: -130,            y: -80,            yOffset: 0        },        {            type: 'avatar',            src: '/static/discover/4.png',            name: '王朵朵',            active: false,            x: 130,            y: -120,            yOffset: 0        },        {            type: 'tag',            text: '年轻',            count: '12345人',            active: false,            x: -160,            y: 50,            yOffset: 0        },        {            type: 'tag',            text: '天然萌',            count: '12345人',            active: false,            x: 160,            y: 60,            yOffset: 0        },        {            type: 'tag',            text: '可爱',            count: '12345人',            active: false,            x: -80,            y: 90,            yOffset: 0        },        {            type: 'tag',            text: '大胸',            count: '12345人',            active: false,            x: 80,            y: 80,            yOffset: 0        },        {            type: 'avatar',            src: '/static/discover/5.png',            name: '肖媚媚',            active: false,            x: -130,            y: 200,            yOffset: 0        },        {            type: 'avatar',            src: '/static/discover/6.png',            name: 'KaiTi',            active: false,            x: 120,            y: 200,            yOffset: 0        },    ]);    const bottomNavs = ref([{            text: '现场',            icon: '/static/discover/live.png',            activeIcon: '/static/discover/live_.png'        },        {            text: '艺人',            icon: '/static/discover/artist.png',            activeIcon: '/static/discover/artist_.png'        },        {            text: '发现',            icon: '/static/discover/discover.png',            activeIcon: '/static/discover/discover_.png'        },        {            text: '我的',            icon: '/static/discover/my.png',            activeIcon: '/static/discover/my_.png'        },    ]);    // 动画相关    const animateCircleItems = () => {        setInterval(() => {           circleItems.value.forEach((item, index) => {            const yOffset = Math.sin((Date.now() / 1000 + index) * 2) * 10; // 计算上下移动的偏移量，可调整参数改变动画效果            item.yOffset = yOffset;           });          }, 16);    };    animateCircleItems();