1. Postman 保存 json 文件
2. 在项目根目录新建一个文件夹,把刚保存的 json 文件放进去
3. index.vue 完整代码
<template>
<view class="page">
<scroll-view scroll-y="true" style="height: 100vh;">
<view class="newsList" v-for="(item,index) in data" :key="item.id">
<view class="">{{index + 1}}. {{item.title}}</view>
<view class="" style="text-align: right;">{{item.hot}}</view>
</view>
</scroll-view>
</view>
</template>
<script>
// 引入本地的 json 文件,@ 表示项目根目录,返回的是一个对象
const newsData = require('@/assets/HotSearchData.json')
export default {
data() {
return {
data: newsData.data // 这个 json 文件所有的数据都在 data 节点中,所以这里需要 .data
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.newsList {
display: flex;
justify-content: space-between;
align-items: center;
margin: 30rpx auto;
width: 80%;
border-radius: 12rpx;
background-color: #f1f2f3;
view {
flex: 1;
box-sizing: border-box;
padding: 30rpx;
letter-spacing: 5rpx;
}
}
</style>
运行效果: