手写瀑布流—67渲染

1.动态渲染图片

另外讲一个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

    }

  }

})

在代码中引入

  const initListPage = {
    pageIndex: 0,
    pageSize: 10
  };
  const [listPage, setListPage] = useState(initListPage);
  const [data, setData] = useState([]);

  const initData = () => {
    axios
      .post("/mock", { 
        dataType: "json",
        data: JSON.stringify(listPage)
       }) //这列的'/mock'与mock.js文件里的地址一致
      .then((res) => {
        const dataTmp = res.data.data.rows;
        setData(dataTmp);
      });
  };

教程中是这样写的

我使用的是react，直接render

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

  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.滑动触底加载更多

看上面的图理解一下

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