uniapp获取接口数据并渲染至页面中

在UniApp中获取接口数据并渲染到页面中，你可以按照以下步骤进行操作：

在Vue组件的data中定义一个用于存储接口数据的变量。示例代码如下：

export default {
  data() {
    return {
      dataList: [] // 存储接口数据的数组
    }
  },
  // ...
}

在上述示例中，我们定义了一个名为dataList的数组，用于存储接口返回的数据。

在Vue组件的生命周期函数（例如onLoad、onShow）或方法中，使用UniApp提供的uni.request方法发送请求获取接口数据。示例代码如下：

export default {
  data() {
    return {
      dataList: []
    }
  },
  methods: {
    fetchData() {
      uni.request({
        url: 'https://xxxxxx', // 接口地址
        success: (res) => {
          this.dataList = res.data // 将接口返回的数据赋值给dataList
        },
        fail: (error) => {
          console.log(error)
        }
      })
    }
  },
  onLoad() {
    this.fetchData() // 在页面加载时调用fetchData方法获取数据
  }
}

在上述示例中，我们在fetchData方法中使用uni.request发送请求获取接口数据，并将返回的数据赋值给dataList变量。

在Vue组件的模板中，通过插值表达式（{{ }}）或指令（v-for）将接口数据渲染到页面中。示例代码如下：

<template>
  <view>
    <text v-for="(item, index) in dataList" :key="index">{{ item.name }}</text>
  </view>
</template>

在上述示例中，我们使用v-for指令遍历dataList数组中的每个元素，并通过插值表达式将item.name渲染到页面中。

通过以上步骤，你就可以在UniApp中获取接口数据，并将数据渲染到页面中了。请根据实际情况进行相应的接口请求和数据处理操作。