社区 › 代码 › 直播平台发现组件、艺人动态展示、点击切换艺人

当贵 发表于 2025-8-29 21:59:05

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

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



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

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代码助手代码解读复制代码 
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(); 


来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

钤凑讪 发表于 2025-11-11 16:00:43

新版吗？好像是停更了吧。

客臂渐 发表于 2025-12-17 03:43:24

新版吗？好像是停更了吧。

臧莞然 发表于 2025-12-17 11:30:31

新版吗？好像是停更了吧。

套缈 发表于 2025-12-26 22:14:53

这个有用。

醋辛 发表于 2026-1-12 13:43:46

用心讨论，共获提升！

奄幂牛 发表于 2026-1-18 15:43:51

感谢发布原创作品，程序园因你更精彩

迁岂罚 发表于 2026-1-18 18:22:00

这个有用。

万妙音 发表于 2026-1-21 08:17:17

谢谢楼主提供！

博咱 发表于 2026-1-23 12:31:26

用心讨论，共获提升！

司寇涵涵 发表于 2026-1-25 11:20:55

过来提前占个楼

髡芯 发表于 2026-1-30 03:01:08

这个好，看起来很实用

任修 发表于 2026-1-30 05:38:50

谢谢分享，试用一下

姬宜欣 发表于 2026-2-2 02:46:09

前排留名，哈哈哈

施婉秀 发表于 2026-2-5 03:04:31

谢谢分享，试用一下

幌斛者 发表于 2026-2-7 03:05:25

分享、互助 让互联网精神温暖你我

边书仪 发表于 2026-2-8 01:33:31

喜欢鼓捣这些软件，现在用得少，谢谢分享！

喙审 发表于 2026-2-8 12:12:45

感谢发布原创作品，程序园因你更精彩

钤凑讪 发表于 2026-2-9 03:18:51

前排留名，哈哈哈

雨角 发表于 2026-2-10 13:33:58

很好很强大我过来先占个楼 待编辑

查看完整版本: 直播平台发现组件、艺人动态展示、点击切换艺人