1：新建一个uniapp项目，命名为test。
2：官方网站找文档，要用到列表组件
导入到自己的test项目里面去
导入之后，可以看到目录结构如下
3：打开index，开始写代码
使用方式列表的方式，在 script 中引用组件并且在 template 中使用组件 。
import uniList from "@/components/uni-list/uni-list.vue" import uniListItem from "@/components/uni-list-item/uni-list-item.vue" export default { components: {uniList,uniListItem} }
index代码写好了参考如下：
<template> <view> <!-- 带描述信息 --> <uni-list> <uni-list-item title="标题文字" note="描述信息"></uni-list-item> </uni-list> <uni-list> <uni-list-item title="标题文字" note="描述信息"></uni-list-item> </uni-list> <uni-list> <uni-list-item title="标题文字" note="描述信息"></uni-list-item> </uni-list> </view> </template> <script> import uniList from "@/components/uni-list/uni-list.vue" import uniListItem from "@/components/uni-list-item/uni-list-item.vue" export default { components: {uniList,uniListItem} } </script> <style> </style>
4：运行到浏览器
点击运行的菜单，运行到chrom浏览器里面。
运行成功，显示的界面效果，这个是静态的。
5：准备一个可以使用的接口
找了一个可以使用的接口，网上有很多免费的api接口，但是很多免费的接口都容易被攻击，很容易失效，在使用之前，请先点击去查看一下，接口是否是完整的。
6：开始写请求
这里是请求使用的一个方法uni.request(OBJECT)：官方文档放在这里：
官网的例子是这样的
示例 uni.request({ url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。 data: { text: 'uni.request' }, header: { 'custom-header': 'hello' //自定义请求头信息 }, success: (res) => { console.log(res.data); this.text = 'request success'; } });
我们可以直接复制，放到自己的代码里面，并且把url修改成我上一步准备的接口数据。
index.vue代码如下
<template> <view> <uni-list> <uni-list-item title="标题文字" note="描述信息"></uni-list-item> </uni-list> <uni-list> <uni-list-item title="标题文字" note="描述信息"></uni-list-item> </uni-list> <uni-list> <uni-list-item title="标题文字" note="描述信息"></uni-list-item> </uni-list> </view> </template> <script> import uniList from "@/components/uni-list/uni-list.vue" import uniListItem from "@/components/uni-list-item/uni-list-item.vue" export default { components: {uniList,uniListItem}, data() { return { // productList: [], }; }, onLoad() { this.getList(); }, methods: { getList() { uni.request({ url: "https://unidemo.dcloud.net.cn/api/news", method: 'get', dataType: 'json', success: (res) => { console.log(res.data); // this.productList = res.data; }, }); }, } } </script> <style> </style>
写完代码之后，打开我们的控制台，可以看到请求的免费的api里面的数据，是请求成功了 的，在请求成功的success方法里面，写一个console.log(res.data)，将数据打印在控制台方便查看。
7：开始赋值，渲染到前端界面
这个时候的步骤就不多说了，大家都非常的清楚，在data()里面定义一个空数组，将请求到的res.data赋值给空数组，然后进到view里面进行遍历，渲染数据到页面。
参考代码;
<template> <view> <uni-list v-for="(item,index) in productList" :key="index"> <uni-list-item :title="item.author_name" :note="item.title"></uni-list-item> </uni-list> </view> </template> <script> import uniList from "@/components/uni-list/uni-list.vue" import uniListItem from "@/components/uni-list-item/uni-list-item.vue" export default { components: {uniList,uniListItem}, data() { return { productList: [], }; }, onLoad() { this.getList(); }, methods: { getList() { uni.request({ url: "https://unidemo.dcloud.net.cn/api/news", method: 'get', dataType: 'json', success: (res) => { console.log(res.data); this.productList = res.data; }, }); }, } } </script> <style> </style>
效果就可以出来了
