uniapp实现列表页面，实用美观

咨询列表页面

组件

<template><view><view class="news_item" @click="navigator(item.id)" v-for="item in list" :key="item.id"><image :src="item.img_url"></image><view class="right"><view class="tit">{{item.title}}</view><view class="info"><text>发表时间：{{item.add_time | formatDate}}</text><text>浏览：{{item.click}}</text></view></view></view></view>
</template><script>export default {props: ['list'],filters: { //过滤器formatDate (date) {//过滤时间处理const nDate = new Date(date)//创建事件对象const year = nDate.getFullYear()//年const month = nDate.getMonth().toString().padStart(2,0)//月const day = nDate.getDay().toString().padStart(2,0)//日return year+'-'+month+'-'+day//中间要加上‘-’否则会变成数值相加}},methods:{navigator (id) {//跳转详情页，调用父组件的方法this.$emit('itemClick',id)}}}
</script><style lang="scss">.news_item{display: flex;padding: 10rpx 20rpx;border-bottom: 1px solid $shop-color;image{min-width: 200rpx; //最小宽度和·最大宽度都是一样的，必须是200max-width: 200rpx; height: 150rpx;}.right{margin-left: 15rpx;display: flex;flex-direction: column;justify-content: space-between;.tit{font-size: 30rpx;}.info{font-size: 24rpx;text:nth-child(2){//表示第二个textmargin-left: 30rpx;}}}}
</style>

引用组件代码

<template><view class="news"><news-item @itemClick="goDetail" :list="newsList"></news-item></view>
</template><script>import newsItem from '../../components/news-item/news-item.vue'export default {data() {return {newsList: []}},methods: {async getNews() {const res = await this.$myRequest({url: '/api/getnewslist'})this.newsList = res.data.message},goDetail(id) {//跳转到详情页，并传咨询ID（由组件调用）uni.navigateTo({url: '/pages/news-detail/news-detail?id=' + id})}},components: {"news-item": newsItem},onLoad() {this.getNews()}}
</script><style lang="scss">.news {}
</style>

资讯列表

接口地址：/api/getnewslist

请求方式：GET

参数：无

数据格式：

{"status":0,"message":[{"id":13,"title":"1季度多家房企利润跌幅超50% 去库存促销战打响","add_time":"2015-04-16T03:50:28.000Z","zhaiyao":"房企一季度销售业绩已经陆续公布，克而瑞研究中心统计","click":1,"img_url":"http://demo.dtcms.net/upload/201504/16/201504161149414479.jpg"}]
}