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

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

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

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

1. [/code] 
2. [size=4]4 在测试项目中加入数据，可以根据需要从后台获取,增加动画处理函数。[/size]
4. [code]const centerAvatar = ref('/static/discover/1.png');
5. const centerName = ref('柳欢欢');
7. const circleItems = ref([{
8.             type: 'avatar',
9.             src: '/static/discover/2.png',
10.             name: 'Jimly',
11.             active: false,
12.             x: 0,
13.             y: -210,
14.             yOffset: 0
15.         },
16.         {
17.             type: 'avatar',
18.             src: '/static/discover/3.png',
19.             name: '李妮娜',
20.             active: false,
21.             x: -130,
22.             y: -80,
23.             yOffset: 0
24.         },
25.         {
26.             type: 'avatar',
27.             src: '/static/discover/4.png',
28.             name: '王朵朵',
29.             active: false,
30.             x: 130,
31.             y: -120,
32.             yOffset: 0
33.         },
34.         {
35.             type: 'tag',
36.             text: '年轻',
37.             count: '12345人',
38.             active: false,
39.             x: -160,
40.             y: 50,
41.             yOffset: 0
42.         },
43.         {
44.             type: 'tag',
45.             text: '天然萌',
46.             count: '12345人',
47.             active: false,
48.             x: 160,
49.             y: 60,
50.             yOffset: 0
51.         },
52.         {
53.             type: 'tag',
54.             text: '可爱',
55.             count: '12345人',
56.             active: false,
57.             x: -80,
58.             y: 90,
59.             yOffset: 0
60.         },
61.         {
62.             type: 'tag',
63.             text: '大胸',
64.             count: '12345人',
65.             active: false,
66.             x: 80,
67.             y: 80,
68.             yOffset: 0
69.         },
70.         {
71.             type: 'avatar',
72.             src: '/static/discover/5.png',
73.             name: '肖媚媚',
74.             active: false,
75.             x: -130,
76.             y: 200,
77.             yOffset: 0
78.         },
79.         {
80.             type: 'avatar',
81.             src: '/static/discover/6.png',
82.             name: 'KaiTi',
83.             active: false,
84.             x: 120,
85.             y: 200,
86.             yOffset: 0
87.         },
88.     ]);
90.     const bottomNavs = ref([{
91.             text: '现场',
92.             icon: '/static/discover/live.png',
93.             activeIcon: '/static/discover/live_.png'
94.         },
95.         {
96.             text: '艺人',
97.             icon: '/static/discover/artist.png',
98.             activeIcon: '/static/discover/artist_.png'
99.         },
100.         {
101.             text: '发现',
102.             icon: '/static/discover/discover.png',
103.             activeIcon: '/static/discover/discover_.png'
104.         },
105.         {
106.             text: '我的',
107.             icon: '/static/discover/my.png',
108.             activeIcon: '/static/discover/my_.png'
109.         },
110.     ]);
112.     // 动画相关
113.     const animateCircleItems = () => {
114.         setInterval(() => {
115.            circleItems.value.forEach((item, index) => {
116.             const yOffset = Math.sin((Date.now() / 1000 + index) * 2) * 10; // 计算上下移动的偏移量，可调整参数改变动画效果
117.             item.yOffset = yOffset;
118.            });
119.           }, 16);
120.     };
121.     animateCircleItems();

复制代码

 
[code][/code]

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