# sol-weapp
**Repository Path**: null_786_0210/sol-weapp
## Basic Information
- **Project Name**: sol-weapp
- **Description**: 商城营销组件，主要包括，转盘、红包雨、九宫格翻牌等功能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-10-13
- **Last Updated**: 2025-10-13
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# sol-weapp
## 简介
> 提供带有大转盘功能，红包雨功能，九宫格翻牌功能，slot抽奖功能，滚动导航条功能，悬浮按钮，滚动数字功能的集成组件。。
## 下载安装
```shell
npm install @ohos/sol_weapp --save
```
OpenHarmony
npm环境配置等更多内容，请参考 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md) 。
## 使用说明
###### 1 大转盘效果
###### hml中实现：
```
```
###### js中实现：
```
export default {
data: {
award: 1,
mode: 2, // 旋转模式
spin:true,
awardList: [
{ title: '10个金币' },
{ title: '20个金币' },
{ title: '30个金币' },
{ title: '50个金币' },
{ title: '80个金币' },
{ title: '200个金币' }
},
}
```
###### 2 红包雨效果
###### hml中实现：
```
```
###### js中实现：
```
export default{
data: {
visible: false
},
}
```
###### 3 九宫格翻牌
###### hml中实现：
```
```
###### js中实现：
```
export default{
data:{
card: [
{
id: 1,
prizeName: '10金币',
img: 'https://www.sunniejs.cn/static/weapp/prize.png',
status: 0, // :0 反面 , 1 正面
isMove:false
},
xxxx 九个对象
],
readyed: false
}
}
```
###### 4 slot效果
###### hml中实现：
```
```
###### js中实现：
```
export default{
data:{
result: []
}
}
```
###### 5 滚动导航条
###### hml中实现：
```
```
###### js中实现：
```
export default{
data:{
list: [
{ num: 20, title: '全部', id: '097b0651ca000031b193e2bca6be792d' },
xxxxx 多个导航
],
index: 0
}
}
```
###### 6 悬浮按钮
###### hml中实现：
```
{{item.title}}
```
###### js中实现：
```
export default{
data:{
scrollTop: 0,
scrollIng: false,
items: [],
count: 0,
}
}
```
###### 7 滚动数字
###### hml中实现：
```
```
## 接口说明
1. 大转盘开始转动
`begin(e)`
2. 开始九宫格动画
`start()`
3. slot开始
`start()`
4. 隐藏悬浮按钮
`hideIcon()`
5. 显示悬浮按钮
`showIcon()`
6. 开始滚动数字动画
`start()`
7. 红包雨点击事件
`handleClickRain(e)`
## 兼容性
支持 OpenHarmony API version 8 及以上版本。
## 目录结构
````
|---- sol-weapp
| |---- entry # 示例代码文件夹
| |---- sol-weapp # sol-weapp库文件夹
| |---- src
| |---- main
| |---- js
| |---- animate-number
| |---- index.hml # 滚动数字
| |---- index.js # 滚动数字
| |---- index.css # 滚动数字
| |---- canvas-drawer
| |---- index.hml # 画布绘制
| |---- index.js # 画布绘制
| |---- index.css # 画布绘制
| |---- grid-card
| |---- index.hml # 九宫格
| |---- index.js # 九宫格
| |---- index.css # 九宫格
| |---- icon-container
| |---- index.hml # 图片容器
| |---- index.js # 图片容器
| |---- index.css # 图片容器
| |---- packet-rain
| |---- index.hml # 红包雨
| |---- index.js # 红包雨
| |---- index.css # 红包雨
| |---- wheel
| |---- index.hml # 大转盘
| |---- index.js # 大转盘
| |---- index.css # 大转盘
| |---- slot-machine
| |---- index.hml # slot
| |---- index.js # slot
| |---- index.css # slot
| |---- README.md # 安装使用方法
````
## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/hihopeorg/sol-weapp/issues)
给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/hihopeorg/sol-weapp/pulls) 。
## 开源协议
本项目基于 [Apache License 2.0](https://gitee.com/hihopeorg/sol-weapp/blob/master/LICENSE) ，请自由地享受和参与开源。