uni

uni

在uni-app 中使用 v-for 渲染列表，方法：

1. 在根目录新建文件夹，并创建一个 .js 文件。

2. 在文件中创建虚拟数据，例：

export default {friends: function() {let friendarr = [{user_url: '/static/userface5.jpg',username: '南二小姐',messagecontent: '来我就发了无法忘记发我房间爱我哦就发物理放假雾非雾放假覅经历过',tip: 2,timestamp: '上午8:26',}, {user_url: '/static/userface2.jpg',username: '王五',messagecontent: '来我就发了无法忘记发我房间爱我哦就发物理放假雾非雾放假覅经历过',timestamp: '上午12:56',},];return friendarr;
}
}

注意： 数组后面加 return 返回构建的对象。

3. 返回需要渲染列表的文件页面，在 <script> 标签下引用 js 文件，（下图中第一行代码，后面 url 是之前创建的 js 文件的相对地址）

4. 在 < script > 标签中的 data 中新建一个空数组 ，例：

<script>import friendslist from '../../common-style/friendslist.js';export default {data() {return {friends:[],}},onLoad() {friends();},methods: {getfriends:function(){this.friends = friendslist.friends();}}}
</script>

5. methods：{ } 内构建一个方法， 此方法的作用是把 js 文件中的数据传递给前面刚刚创建的空数组，方便在本页面使用。如上代码。

6. 把刚刚构建的方法函数放到 onload（）函数中（页面加载触发）。这样，页面加载时会自动调用该方法。

7.调用时比较简单，在需要重复渲染的单元最外层容器中加上 v-for = "(item, index) in friends" :key = "index"。例：

<view class="message-box" v-for="(item, index) in friends" :key = "index">

item 代表“项”，也就是最小的列表单元，可以随意更改成其它字符。index 代表数组下标， friends 是我们在 data 中创建的数组的名称。 :key = "index" 代表列表渲染时按数组下标的顺序。

8. 最后一步是数据绑定，如下：

<view class="username-box">{{item.username}}</view>
<view class="message">{{ssagecontent}}</view>

双花括号是绑定数据的固定格式，{{ item.username}} 中，item是定义的项的名称，不用更改，username 和 messagecontent 等都是数组中每一个数据的名称。