工作内容

• 修复汇车计算地理距离不准确的问题
• 汇车商家列表添加下拉刷新功能
• 汇车商家列表添加滑动加载分页功能
• 采用mint-ui的loadmore和infinite-scroll组件来实现

QQ20170401-015451-HD.gif

QQ20170401-015303-HD.gif

优化获取距离算法 之后全部统一为gcj02坐标系

getDistance(lat1, lng1, lat2, lng2) {
    const rad = d => (d * Math.PI) / 180.0;
    const EARTH_RADIUS = 6378137.0;
    const radLat1 = rad(lat1);
    const radLat2 = rad(lat2);
    const a = radLat1 - radLat2;
    const b = rad(lng1) - rad(lng2);

    /* eslint-disable no-mixed-operators */
    /* eslint-disable no-restricted-properties */
    let res = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
    res *= EARTH_RADIUS;
    res = Math.round(res * 10000) / 10000.0;
    res = res.toFixed(1);
    let str = '';
    if (res < 999.9) {
      str = `${res}m`;
    } else {
      str = `${(res / 1000).toFixed(1)}km`;
    }
    return str;
  },

showdata(shoplist, shopcate) {
        console.log(shoplist);
        console.log(shopcate);

        // 通过判断是否为数组来识别是不是初次加载，如果不是就把数据数组拼接起来
        if (Array.isArray(this.dataList)) {
          this.dataList = this.dataList.concat(shoplist);
        } else {
          this.dataList = shoplist;
        }
}

 //String province, String city, String region, String level, Integer pno, Integer size
        const getshoplists = axios.get(API.shop_list, {
          params
        });
        const reqs = [getshoplists];
        axios.all(reqs).then(axios.spread((shops) => {
          console.log('reqs ok!');

          this.showdata(shops.data.data.data);
          // 获取数据总数
          this.dataCount = shops.data.data.count;

          this.loadingData = false;
          // 加载完成触发一下onTopLoaded
          this.$refs.loadmore.onTopLoaded();
        }))

修改loadmore方法

loadmore() {
        const currentpage = this.page;
        const totalpage = this.dataCount / this.pageSize;
        if (currentpage < totalpage) {
          console.log(`loading more...p=${this.page}`);
          this.page += 1
          this.loaddata();
        }
}

总结

对比了vux和mint-ui的这几个组件，还是mint-ui方便些，之前想把vux提供的组件封装一下在用，写完了调试半天发现依然麻烦，最后采用了mint-ui（并没有加载全部，按需加载了需要的组件）