react微网页遇到的问题

使用react使用微网页时遇到的问题

list的上拉加载问题（基于antd,而不是antd-mobile）

• 想实现一个上拉加载下一页的功能，因为UI组件用的时antd，所以就使用了一下antd中的List的滚动加载
• 使用这个滚动加载的时候需要结合 react-infinite-scroller这个组件 实现滚动自动加载列表。
• 实现过程如下：

  // state 需要的数据
  state = {
  pageNo: 1,
  pageSize: 10,
  data: [],
  loading: false,
  hasMore: true,
  count: 0,
  }
  // 这是请求
  fetchData = callback => {
  const { searchName, searchSort, pageNo, pageSize } = this.state;
  const params = {
    pageNo,
    pageSize,
  };
  getHomeProducts(params).then(res => {
    if (res.success) {
      callback(res);
    }
  });
  };
  // 进入页面先获取第一页
    componentWillMount() {
  this.fetchData(res => {
    this.setState({
      data: res.data.records,
      count: res.data.totalCount,
    });
  });
  }
  // 上拉加载的触发
  handleInfiniteOnLoad = () => {
    let { data, pageNo } = this.state;
    const { count } = this.state;
    this.setState({
      loading: true,
      pageNo: (pageNo += 1),
    });
    // 判读data列表的数据是不是等于count,等于为加载完毕
    if (data.length >= count) {
      this.setState({
        hasMore: false,
        loading: false,
      });
      return;
    }
    // 没有加载完毕的话就继续请求
    this.fetchData(res => {
      data = data.concat(res.data.records);
      this.setState({
        data,
        loading: false,
      });
    });
  };
  // jsx中的代码如下
  	<InfiniteScroll
            initialLoad={false}
            pageStart={this.state.pageNo}
            loadMore={this.handleInfiniteOnLoad}
            hasMore={!this.state.loading && this.state.hasMore}
            useWindow={false}
          >
            <List
              dataSource={this.state.data}
              renderItem={(item, index) => (
                <div className={style.listDiv}>
                  <ProductItem dataInfor={item} key={item.id} />
                </div>
              )}
            >
              {this.state.loading && this.state.hasMore && (
                <div className={style.demoloadingcontainer}>
                  <Spin />
                </div>
              )}
            </List>
          </InfiniteScroll>
  

上面的那个上拉加载存在一个问题，就是从详情页返回的时候会滚动条不会定位，下面是解决问题的方法

• 在vue中有keep-alive可以帮助我们更好的进行页面缓存
• 但是react的话我没有找到比较好用的插件，或者是找到的插件老是报错的问题，所以我就用自己的方法实现了这一逻辑
• 过程如下：
  1. 我在页面跳转之前，在销毁时期的生命周期函数中把所需要的一些数据（列表数据 以及一些搜索字段）存在了localStorage里面(判断一下跳转页面是不是详情页)

     componentWillUnmount () {
     const { searchName,searchSort,minMoq,maxMoq,minPrice,maxPrice,searchProvince,searchCity,pageNo,pageSize,data,loading,hasMore,count,loadState} = this.state
     const storageData = { searchName,searchSort,minMoq,maxMoq,minPrice,maxPrice,searchProvince,searchCity,pageNo,pageSize,data,loading,hasMore,count,loadState} 
     const nextPath = window.location.pathname
     nextPath==='/mProductDetail'?
     localStorage.setItem("storageData",JSON.stringify(storageData))
     :null 
     }
     

  2. 监听一下列表这个元素scroll,通过onScroll这个事件把scrollTop属性值存在localStorage里面
  3. 进入列表的时候，在生命周期函数componentDidMount中判断是不是从详情页进入的，如果是的话 ，那把state里面的搜索字段。数据列表字段都使用localStorage里面的，如果不是的话 那就请求
  4. 如果使用缓存数据的话 ，在把组件中的state数据修改为存储的那些数据后，需要及时清除localStorage里面的数据

     componentDidMount() {
     // 判断是不是从详情页进来的 如果是的话 判断有没有缓存数据 有的话 那就使用缓存 并且滚动到离开时位置
     if(JSON.parse(localStorage.getItem('storageData'))){
       const { searchName,searchSort,minMoq,maxMoq,minPrice,maxPrice,searchProvince,searchCity,pageNo,pageSize,data,loading,hasMore,count,loadState} = JSON.parse(localStorage.getItem('storageData'))
      this.setState({
       searchName,searchSort,minMoq,maxMoq,minPrice,maxPrice,searchProvince,searchCity,pageNo,pageSize,data,loading,hasMore,count,loadState
      },()=> {
       document.getElementById('list').scrollTop=JSON.parse(localStorage.getItem('scrollTop'))
       // 设置完之后 清除缓存的数据
       localStorage.removeItem('storageData')
       localStorage.removeItem('scrollTop')
      })
     } else {
       this.fetchData(res => {
         this.setState({
           data: res.data.records,
           count: res.data.totalCount,
         });
       })
     }
     this.fetchNationRegionTree();
     }
     

轮播图中图片的预览问题（ui组件是antd）

• 在一个详情页面中有一个轮播图，希望点击轮播图的某一个图片进行图片预览，在预览的同时也可以进行图片上一个，下一个
• 在网上找了一个插件react-zmage官网地址是这里
• 首先安装 cnpm install react-zmage -S
• 引入import Zmage from 'react-zmage'
• 然后我们只需要把img标签替换成Zmage标签就好。这样只是单独一个图片的预览。
• 我们希望轮播图中的图片列表在预览的时候都可以看到，那么需要设置set和defaultPage这两个属性

Zmage中的 set属性和defaultPage的使用

 <Zmage
	controller={{ download: false, zoom: false}} // 里面的两个属性分别是 是否显示下载按钮以及 缩放按钮
	src={item.url} alt='' // 图片的地址
	defaultPage={index}  // 这里是点击之后，展示的哪一个图片，如果没有这个索引的话会在预览的时候展示imgList的第一个图片
	set={this.state.imgList} // set 设置的是预览时的图片数组， set={[{src:'xxxx'},{src:'xxxx'}]} ,数据格式如下、
	preset='mobile' // 配置界面的功能及样式 有mobile， desktop 属性值 
 />

Zmage在h5页面中会有一个报错

• Unable to preventDefault inside passive event listener due to target being treated as passive.
• 上面这个报错是在点击和滑动的时候的报错
• 解决办法就是在我的css文件中加入* { touch-action: pan-y; }