uniapp城市列表_uniapp 列表和详情，循环使用教程

{{item.title}}

{{item.created_at}}

export default {

data() {

return {

news : []

};

},

onLoad:function(){

uni.showLoading({

title:"加载中...."

})

uni.request({

url: 'https://unidemo.dcloud.net.cn/api/news',

method: 'GET',

data: {},

success: res => {

this.news = res.data;

uni.hideLoading();

},

fail: () => {},

complete: () => {}

});

},

methods: {

openinfo(e) {

var newsid = e.currentTarget.dataset.newsid;

uni.navigateTo({

url: '../info/info?newsid='+newsid

});

}

},

}

.uni-media-list-body{height: auto;}

.uni-media-list-text-top{line-height:1.6em;}

=======info=================

{{title}}...

export default {

data() {

return {

title: '',

strings : ''

}

},

onLoad:function(e){

console.log(e);

uni.request({

url: 'https://unidemo.dcloud.net.cn/api/news/36kr/'+e.newsid,

method: 'GET',

data: {},

success: res => {

console.log(res);

this.title = res.data.title;

this.strings = res.data.content;

},

fail: () => {},

complete: () => {}

});

}

}

.content{padding:10upx 2%; width: 96%; flex-wrap:wrap;}

.title{line-height:2em; font-weight:700; font-size:38upx;}

.art-content{line-height:2em;}

=======pages.json=============

{

"pages" : [

//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages

{

"path" : "pages/index/index",

"style" : {

"navigationBarTitleText" : "uni-app"

}

},

{

"path" : "pages/info/info",

"style" : {}

}

],

"globalStyle" : {

"navigationBarTextStyle" : "black",

"navigationBarTitleText" : "uni-app",

"navigationBarBackgroundColor" : "#F8F8F8",

"backgroundColor" : "#F8F8F8"

},

"condition": { //模式配置，仅开发期间生效

"current": 0, //当前激活的模式(list 的索引项)

"list": [{

"name": "test", //模式名称

"path": "pages/info/info", //启动页面，必选

"query": "newsid=5158607" //启动参数，在页面的onLoad函数里面得到。

}

]

}

}

## 列表到详情接口

### 列表

https://unidemo.dcloud.net.cn/api/news

- 返回数据格式

- post_id 新闻id 如 ： 72980

- title 标题

- created_at 创建时间

- author_avatar 图标

### 详情

地址：https://unidemo.dcloud.net.cn/api/news/36kr/ + id(id为新闻id，上个页面传过来的)

使用 rich-text 【富文本组件】来展示新闻内容