Taro-定位及向下滚动加载

- 日理万妓 2021-08-30 21:59 786阅读 0赞

### 定位 ###

使用 `Taro` 提供的API

// 提前将微信小程序的JSSDK准备好放到项目中
    import AAMapWX from '../../../plugins/wxmap/qqmap-wx-jssdk'
    
    Taro.getLocation({ 
        type: 'wgs84',
        success: function (res) { 
            const latitude = res.latitude
            const longitude = res.longitude
            const speed = res.speed
            const accuracy = res.accuracy
            // 获取到经纬度以后调用微信小程序的SDK
            // 实例化API核心类
            var qqmapsdk = new QQMapWX({ 
                key: '自己申请的腾讯地图key'
            })
            
            // 使用小程序API直接解析获取当前位置
            qqmapsdk.reverseGeocoder({ 
                location: { 
                    latitude,
                    longitude
                },
                success: function (res) { 
                    let location = res.result.address
                    console.log(loaction)
                }
            })
        }
    })

### 下拉上拉加载 ###

Taro 有提供这两种的API，但是兼容性不是很好，有的只支持微信小程序的，不兼容H5的，所以我只找了两个都兼容的。

// onScrollToLower 方法在组件 <ScrollView> 上调用，然后可以自定义方法，也可以调用下拉刷新的API
    
    onScrollToLower = (e) => { 
        // 计算当前有多少页数
        let pageTotal = Math.ceil(this.state.total / 10);
    
        // newPageNum 需要传递给后端的 pageNum
        let newPageNum = this.state.pageNum + 1
        // 如果 newPageNum 大于了当前的总页数，说明数据加载完毕
        if (newPageNum > pageTotal) { 
            Taro.showToast({ 
                title: '无更多数据'
            })
        } else { 
        	// 加载数据, 并将加载动画关闭
            Taro.hideLoading()
        }
    }

公众号：Coder 杂谈，欢迎关注  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]: /images/20210813/14311dbf1f5046abb97bb64a9295044a.png