# jdh5

**Repository Path**: viktor028/jdh5

## Basic Information

- **Project Name**: jdh5
- **Description**: react 高级组件 练习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-14
- **Last Updated**: 2022-10-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 仿京东h5框架

## 1.项目说明

使用react技术结合高阶组件实现京东h5页面框架搭建，滚动组件iscroll使用.

## 2. 效果

![](./media/jdh5.gif)

## 3. 关键技术

1. 安装iscroll

   ```
   npm i iscroll -S
   ```

2. 引入

   ```
   import IScroll from 'iscroll/build/iscroll-probe'; 
   ```

3. 初始化

   ```js
    componentDidMount() {
         //由于手机性能的原因，我们在定时器里面进行实例化
         this.myScroll = new IScroll('#wrapper', {
           mouseWheel: true, // 支持滚动
           scrollbars: 'custom', // 自定义样式
           shrinkScrollbars: 'scale', // 缩放
         });
     }
   ```

4. 自定义滚动条样式

   ```css
   /* 滚动区域 */
   .iScrollVerticalScrollbar {
     position: absolute;
     z-index: 9999;
     width: 0.2rem;
     height: calc(100vh - 70px);
     bottom: 2px;
     top: 2px;
     right: 0;
     overflow: hidden;
   }
   /* 滚动条 */
   .iScrollIndicator {
     position: absolute;
     width: 0.2rem; 
     height: calc(100vh - 70px);
     background: rgba(161, 158, 158, 0.6);
     border-radius: 0.1rem;
     
   }
   ```

   

5. iScroll 5 API 中文版http://caibaojian.com/iscroll-5/

## 4. 运行程序

```
安装依赖包  yarn 
执行  yarn start
```