手写瀑布流—67渲染

水深无声 2023-01-18 09:17 197阅读 0赞

### 1.动态渲染图片 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

另外讲一个react hooks和mocks的结合使用实现分页功能

首先安装axios， mockjs

然后新建一个文件写入以下代码即可

// // mock.js
    // // 使用 Mock
    // var Mock = require('mockjs')
    // var data = Mock.mock("/mock",{  
    //   //"/mock"是通过ajax获取数据时填写的地址，可以随意写。但要和ajax请求时填写的地址一致。
    // 	"userinfo|20":[{   			//生成四个如下格式的数据
    // 		"id|+1":1, 						//数字从1开始，后续依次加1
    // 		"name":"@cname",			//名字为随机中文名
    // 		"age|18-28":25, 			//年龄是18-28之间的随机数
    // 		"sex|1":["男","女"],	 //性别是数组里的随机一项
    //         "job|1":["web","teacher","python","php"],   //job是数组里的随机一项
    //         "image": "@image('','','','','')",
    // 	}]
    // })
    // // 输出结果
    // export default data
    
    //mock.js 文件
    
    import Mock from 'mockjs' // 引入mockjs
    
    const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据
    
    const dataList = [] // 用于接受生成数据的数组
    
    for (let i = 0; i < 26; i++) { // 可自定义生成的个数
    
      const template = {
    
        'Boolean': Random.boolean, // 可以生成基本数据类型
    
        'Natural': Random.natural(1, 10), // 生成1到100之间自然数
    
        'Integer': Random.integer(1, 100), // 生成1到100之间的整数
    
        'Float': Random.float(0, 100, 0, 5), // 生成0到100之间的浮点数,小数点后尾数为0到5位
    
        'Character': Random.character(), // 生成随机字符串,可加参数定义规则
    
        'String': Random.string(2, 10), // 生成2到10个字符之间的字符串
    
        'Range': Random.range(0, 10, 2), // 生成一个随机数组
    
        'Date': Random.date(), // 生成一个随机日期,可加参数定义日期格式
    
        'Image': Random.image(Random.size, '#02adea', 'Hello'), // Random.size表示将从size数据中任选一个数据
    
        'Color': Random.color(), // 生成一个颜色随机值
    
        'Paragraph': Random.paragraph(2, 5), // 生成2至5个句子的文本
    
        'Name': Random.name(), // 生成姓名
    
        'Url': Random.url(), // 生成web地址
    
        'Address': Random.province() // 生成地址
    
      }
    
      dataList.push(template)
    
    }
    
    // list 分页接口()
    
    Mock.mock('/mock', 'post', (params) => {
      var info = JSON.parse(params.body)
      info = JSON.parse(info.data);
      var [index, size, total] = [info.pageIndex, info.pageSize, dataList.length]
    
      var len = total / size
    
      var totalPages = len - parseInt(len) > 0 ? parseInt(len) + 1 : len
    
      var newDataList = dataList.slice(index * size, (index + 1) * size)
    
      return {
    
        'code': '0',
    
        'message': 'success',
    
        'data': {
    
          'pageIndex': index,
    
          'pageSize': size,
    
          'rows': newDataList,
    
          'total': total,
    
          'totalPages': totalPages
    
        }
    
      }
    
    })

在代码中引入

教程中是这样写的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

我使用的是react，直接render

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

我也用操作节点的方式做一下

const render = (args) => {
        const oParentNode = document.getElementsByClassName("container")[0];
        args.forEach((item) => {
          const itemNode = document.createElement('div');
          itemNode.className = "image-item";
          const imgNode = document.createElement('img');
          imgNode.src = item.Image;
          imgNode.alt = '';
          itemNode.appendChild(imgNode);
          oParentNode.appendChild(itemNode);
        });
      };

### 2.滑动触底加载更多 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

看上面的图理解一下

A a 的距离是一样的，B b的距离也是一样的

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20221021/0fd9bc3e575046fdaaec4e61cba56dc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20221021/ebcffefe2d024570bad84b9ba631ac41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20221021/7f058a75fea040aebf80c71d3abb4a89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20221021/387b21f8fc6f4a64a2a50f4e25a015f3.png