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

幸福青鸟 發表於 2025-8-29 14:15:00

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

<h1 class="article-title" data-v-61fb5e44="">直播平台发现组件、艺人动态展示、点击切换艺人</h1>
<div>
<div>
<h2 data-id="heading-0"><img src="https://img2024.cnblogs.com/blog/1690727/202508/1690727-20250829141306515-420953665.gif"></h2>
 
<h2 data-id="heading-0">直播平台发现组件使用步骤：</h2>
<h3 data-id="heading-1">1. 查找插件</h3>
进入插件市场：打开 HBuilderX 编辑器，点击菜单栏中的 “插件” -> “插件市场”，或者直接访问uni-app 插件市场官网。搜索插件：在插件市场的搜索框中输入关键词，查找本插件，比如搜索 “小程序对接视频号” 。筛选插件：筛选出小程序对接视频号插件。
<h3 data-id="heading-2">2. 安装插件</h3>
方式一：在 HBuilderX 中安装在插件市场找到目标插件后，点击进入插件详情页。点击 “使用 HBuilderX 导入插件” 按钮（如果是免费插件，直接导入；如果是付费插件，需要先购买）本插件是免费免费的喽。选择要导入插件的 uni-app 项目，确认导入。导入成功后，插件会被放置在项目的 uni_modules 目录下。方式二：通过命令行安装（适用于发布到 npm 的插件）打开命令行工具，进入你的 uni-app 项目根目录。执行 npm install 插件名称命令，例如 npm install my-uniapp-plugin 。安装完成后，同样可以在项目的 uni_modules 目录下找到该插件。
<h3 data-id="heading-3">3. 引入插件</h3>
<div class="code-block-extension-header">
<div class="code-block-extension-headerLeft">
<div class="code-block-extension-foldBtn"> </div>
ini</div>
<div class="code-block-extension-headerRight">
<div class="code-tips" data-v-4fdcfe21="">体验AI代码助手</div>
<div class="render" data-v-159ebe90="">代码解读</div>
<div class="code-block-extension-copyCodeBtn">复制代码</div>
</div>
</div>
<div class="cnblogs_code">
<pre><liveStreamDiscoverVue
:centerAvatar="centerAvatar"
:centerName="centerName"
:circleItems="circleItems"
:bottomNavs="bottomNavs" /></pre>
</div>
 
<h3 data-id="heading-4">4 在测试项目中加入数据，可以根据需要从后台获取,增加动画处理函数。</h3>
<div class="code-block-extension-header">
<div class="code-block-extension-headerLeft">
<div class="code-block-extension-foldBtn">
<div class="cnblogs_code">
<pre>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();</pre>
</div>
 
</div>
</div>
</div>
<pre></pre>
</div>
 
</div> 
来源：https://www.cnblogs.com/happy2010/p/19064461

頁: [1]

琼殿技术论坛's Archiver

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