uniapp中List列表绑值

<template>
	<view class="u-page">
		<u-cell-group class="font">
			<u-cell icon="phone-fill" v-for="(item, index) in data" :key="index" :title="'姓名：'+item.compellation" >
				<template slot='label'>
					<view style="margin: 2rpx;" @click="callPhone(item.phone)">联系电话：{{item.phone}}</view>
					<view style="margin: 2rpx;">备用电话：{{item.standbyPhone}}</view>
				</template>
			</u-cell>
		</u-cell-group>
	</view>
</template>
<script>
	import * as api from '@/request';
	export default {
		name: 'index',
		data() {
			return {
				data:[],
			};
		},
		onLoad() {
			this.data = []
			this.getInfo()
		},
		methods: {
			getInfo() {
				let params = {
					data:{},
					pageNum: 1,
					pageSize: 10,
				}
				api.complaintAll(params).then(res => {
					this.data = this.data.concat(res.data.list)
					console.log('列表：',this.data)
					uni.stopPullDownRefresh()
				});
			},
			// 拨打电话
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			}
		}
	};
</script>

<style scoped lang="scss">
</style>

🍉  import * as api from '@/request';    

       将 @/request 模块中的所有导出内容进行整体导入(引入)的方式。这样我们可以在其他模块中直接使用 api 对象来访问 @/request 中导出的所有函数和变量。

🍉   this.data = [ ]        //将数组清空

🍉   this.getInfo()        //重新获取数据并更新页面

🍉   this.data = this.data.concat(res.data.list)        

        concat() 方法将新获取到的数据拼接到已有的数据列表中，更新 this.data的值

🍉  uni.stopPullDownRefresh()       //uni.stopPullDownRefresh() 方法停止下拉刷新动画

🍉  uni.makePhoneCall({ phoneNumber:phone })        //点击电话号码可以直接拨打电话

页面效果展示：