效果圖：
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-529791.html

<template>
	<view class="user">
		<view class="list">
			<view class="title">地址列表</view>
			<view class="title-label">
				<view>名稱</view>
				<view>距離（由近到遠(yuǎn)排序）</view>
			</view>
			<view class="item" v-for="(item,index) in sortingList" :key="index">
				<view class="item-top">
					<view class="item-top-left">{{item.placeName}}</view>
					<view class="item-top-right">
						<view>{{item.designCapacity}}km</view>
						<view class="view-btn" @click="toNavigation(item.longitude,item.latitude,item.placeName,item.temporaryAddress)">
							<image src="../../static/img/view-btn.png"></image>
						</view>
					</view>
				</view>
				<view class="item-bottom">地址：{{item.temporaryAddress}}</view>
			</view>
			<!-- 到底了~ -->
			<view class="loadall" v-if="sortingList.length > 10 && loadAll">已加載全部數(shù)據(jù)</view>
			<!-- 空 -->
			<view class="empty" v-if="!sortingList.length">
				<view class="empty-text">暫無(wú)數(shù)據(jù)</view>
			</view>	
		</view>
	</view>
</template>

<script>
	var http = require("../../utils/http.js");
	var config = require("../../utils/config.js");
	export default {
		data() {
			return {
				sortingList: [],//地址列表
				longitude: '', // 經(jīng)度(當(dāng)前用戶位置)
				latitude: '',// 緯度(當(dāng)前用戶位置)
				loadAll: false ,// 已加載全部
				current: 1,
				total:0,//總數(shù)量
				pageSize:10,//每頁(yè)查詢數(shù)量
			}
		},
		components: {},
		props: {},
		computed:{},
		
		/**
		 * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
		 */
		onLoad: function (options) {
			this.getCurrentLocation()
		},
		
		/**
		 * 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
		 */
		onReady: function () {},
		
		/**
		 * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
		 */
		onShow: function () {
		  	this.current = 1
			this.sortingList = []
			this.getSortingList(1)
				
		},
		
		/**
		 * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
		 */
		onHide: function () {},
		
		/**
		 * 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
		 */
		onUnload: function () {},
		
		/**
		 * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
		 */
		onPullDownRefresh: function () {},
		
		/**
		 * 頁(yè)面上拉觸底事件的處理函數(shù)
		 */
		onReachBottom: function () {
			if (this.current < this.total/this.pageSize) {
				this.current ++;
				this.getSortingList(1)
			} else {
				this.loadAll = true
			}
		},
		methods: {
			//通過(guò)自帶的方法獲取到當(dāng)前的經(jīng)緯度
			getCurrentLocation() {
				let that = this 
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log("當(dāng)前位置信息：",res)
						that.longitude = res.longitude; // 經(jīng)度
						that.latitude = res.latitude;// 緯度
					},
					fail: function(error) {
						uni.showToast({
							title: '無(wú)法獲取位置信息！無(wú)法使用位置功能',
							icon: 'none',
						})
					}
				});
			},
			// 獲取地址列表
			getSortingList: function(current) {
				uni.showLoading();
				var params = {
					url: "/xxx/xxx",
					method: "GET",
					data: {
						pageNum: this.current,
						pageSize: 10,
						longitude: this.longitude, // 經(jīng)度
						latitude: this.latitude // 緯度
					},
					callBack: res => {
						uni.hideLoading()
						this.sortingList = this.sortingList.concat(res.rows);
						this.total = res.total;
					}
				};
				http.request(params);
			},
			//導(dǎo)航--傳終點(diǎn)的坐標(biāo)即可
			toNavigation: function(endLongitude,endLatitude,placeName,temporaryAddress) {
				console.log("返回的坐標(biāo)：",endLongitude,endLatitude)
				uni.openLocation({
					longitude: parseFloat(endLongitude),
					latitude: parseFloat(endLatitude),
					scale: 28, // 縮放比例TODO
					name:placeName,//地點(diǎn)名稱
				    address:temporaryAddress,//地點(diǎn)詳細(xì)地址
					success: function (res) {
						console.log('success:',res);
					}
				});
			},
		}
	}
</script>
<style>
	page {
	background: #f4f4f4;
}
.list{
	margin-top: 32rpx;
}
.title{
	font-size: 34rpx;
	color: #333333;
	text-align: center;
}
.title-label{
	margin-top: 27rpx;
	margin-bottom: 24rpx;
	display: flex;
	justify-content: space-between;
	font-size: 30rpx;
	color: #666666;
	padding-left: 22rpx;
	padding-right: 22rpx;
}
.item{
	width:100%;
	padding: 17rpx 22rpx 28rpx 22rpx;
	background: #FFFFFF;
	margin-bottom: 28rpx;
	box-sizing:border-box;
}
.item-top{
	height: 56rpx;
	line-height: 56rpx;
	margin-bottom: 27rpx;
	font-size: 30rpx;
	color: #333333;
	display: flex;
	justify-content: space-between;
}
.item-top-right{
	display: flex;
	justify-content: space-between;
	height: 56rpx;
	line-height: 56rpx;
}
.item-bottom{
	font-size: 30rpx;
	color: #666;
}
.view-btn{
	width: 200rpx;
	height: 58rpx;
	border-radius: 60rpx;
	margin-left: 10rpx;
}
.view-btn  image{
	width:100%;
	height:100%;
} 
.empty-text {
  font-size: 28rpx;
  text-align: center;
  color: #999;
  line-height: 2em;
}
.loadall{
	font-size: 28rpx;
	text-align: center;
	color: #999;
	line-height: 2em;
	margin-bottom: 20rpx;
}

</style>

到了這里，關(guān)于uniapp 微信小程序?qū)Ш焦δ埽◤牡刂妨斜韮?nèi)點(diǎn)擊某一個(gè)地址）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！