uniapp——新闻列表(uni-list、uni-list-item)--顶部下拉刷新--上拉加载更多--顶部提示语
1、新闻列表模式效果图:代码<template><uni-list><!-- title、note设置标题和小文字 --><uni-list-item direction="row" v-for="item in info" :key="item.id" :title="item.title" :note="item.user_name + ' '+ite
·
1、新闻列表模式
效果图:
代码
<template>
<uni-list>
<!-- title、note设置标题和小文字 -->
<uni-list-item direction="row" v-for="item in info" :key="item.id" :title="item.title" :note="item.user_name + ' '+item.last_modify_date">
<!-- 通过v-slot:header插槽定义列表左侧的图片显示,其他内容通过List组件内置属性实现-->
<template v-slot:header>
<!-- 当前判断长度只为简单判断类型,实际业务中,根据逻辑直接渲染即可 -->
<image class="image-1" :src="item.avatar" mode="aspectFill"></image>
</template>
</uni-list-item>
</uni-list>
</template>
<script>
export default {
data() {
return {
info: [{
"user_name": "未来汽车日报",
"title": "为什么自动驾驶诉讼不断?",
"avatar": "https://img.36krcdn.com/20200410/v2_9c3331af67e64994aa97a27fffb1a380_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
"last_modify_date": "2020-04-11 17:11:09",
},
{
"user_name": "36氪深度服务",
"title": "2020数字中国创新大赛-数字政府赛道21强出炉,四大赛题紧贴政府数字化发展需求",
"avatar": "https://img.36krcdn.com/20200411/v2_16417a06088947debe0450950f8fc813_img_png",
"last_modify_date": "2020-04-11 17:03:18",
}, {
"user_name": "未来汽车日报",
"title": "地方政府救市哪家强?广州补贴上万元,广深杭新增指标超5万",
"avatar": "https://img.36krcdn.com/20200410/v2_6905947498bc4ec0af228afed409f771_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
"last_modify_date": "2020-04-11 16:11:11",
}
]
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.image-1 {
flex-shrink: 0;
margin-right: 10px;
width: 125px;
height: 75px;
border-radius: 6px;
overflow: hidden;
border: 1px #f5f5f5 solid;
}
</style>
还需要这两个文件:
2、文字列表模式(可添加自定义图片)
代码:
<template>
<uni-list>
<view v-for="item in info" class="view_tupian_wenzi" bindtap="click" >
<!-- 包裹两行文字 -->
<view class="view_wenzi2">
<text>{{item.title}}</text>
<text class="text_small">{{item.detail}}</text>
</view>
</view>
</uni-list>
</template>
<script>
export default {
data() {
return {
info: [{
"title": "wifi名称:FSlihua1",
"detail": "A1:84:12:8C"
},
{
"title": "wifi名称:CMCC-fslihua",
"detail": "B1:84:12:83"
}, {
"title": "wifi名称:FSlihua_guest",
"detail": "C1:84:12:8D"
}
]
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
page {
width: 100%;
height: 100%;
}
.view_tupian_wenzi {
height: 120rpx;
display: flex;
flex-direction: row;
align-items: center;
/* 圆角 */
border-radius: 18rpx;
/* 边 */
border: 1rpx solid #E0E3DA;
/* 阴影 */
box-shadow:2rpx 6rpx 0rpx #e5e8df;
background-color: #ffffff;
margin: 30rpx;
/* padding使得文字和图片不至于贴着边框 */
padding: 25rpx;
}
/* 包裹两行文字 */
.view_wenzi2 {
width: 100%;
margin-left: 25rpx;
display: flex;
flex-direction: column;
}
/* 小字 */
.text_small {
font-size: 30rpx;
word-break: break-all;
color: #7a7878;
margin-top: 10rpx
}
</style>
3、顶部下拉刷新
在page.json中添加:
"enablePullDownRefresh": true //设置为true表示当前页面开启下拉刷新
在methods: {}里添加
/**
* 下拉刷新回调函数
*/
onPullDownRefresh() {
console.log("下拉刷新")
},
4、完整的下拉刷新,上拉加载更多的联动
<template>
<view>
<!-- 顶部提示 -->
<tui-tips ref="toast"></tui-tips>
<uni-list>
<!-- title、note设置标题和小文字 -->
<uni-list-item direction="row" v-for="item in info" :key="item.id" :title="item.title" :note="item.user_name + ' '+item.last_modify_date">
<!-- 通过v-slot:header插槽定义列表左侧的图片显示,其他内容通过List组件内置属性实现-->
<template v-slot:header>
<!-- 当前判断长度只为简单判断类型,实际业务中,根据逻辑直接渲染即可 -->
<image class="image-1" :src="item.avatar" mode="aspectFill"></image>
</template>
</uni-list-item>
</uni-list>
<!-- 通过 loadMore 组件实现上拉加载效果,如需自定义显示内容,可参考:https://ext.dcloud.net.cn/plugin?id=29 -->
<uni-load-more :status="statusLoadMore" />
</view>
</template>
<script>
export default {
data() {
return {
statusLoadMore:"more",//more,loading,nomore
info: [{
"user_name": "未来汽车日报",
"title": "为什么自动驾驶诉讼不断?",
"avatar": "https://img.36krcdn.com/20200410/v2_9c3331af67e64994aa97a27fffb1a380_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
"last_modify_date": "2020-04-11 17:11:09",
},
{
"user_name": "36氪深度服务",
"title": "2020数字中国创新大赛-数字政府赛道21强出炉,四大赛题紧贴政府数字化发展需求",
"avatar": "https://img.36krcdn.com/20200411/v2_16417a06088947debe0450950f8fc813_img_png",
"last_modify_date": "2020-04-11 17:03:18",
}, {
"user_name": "未来汽车日报",
"title": "地方政府救市哪家强?广州补贴上万元,广深杭新增指标超5万",
"avatar": "https://img.36krcdn.com/20200410/v2_6905947498bc4ec0af228afed409f771_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
"last_modify_date": "2020-04-11 16:11:11",
},
{
"user_name": "未来汽车日报",
"title": "为什么自动驾驶诉讼不断?",
"avatar": "https://img.36krcdn.com/20200410/v2_9c3331af67e64994aa97a27fffb1a380_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
"last_modify_date": "2020-04-11 17:11:09",
},
{
"user_name": "36氪深度服务",
"title": "2020数字中国创新大赛-数字政府赛道21强出炉,四大赛题紧贴政府数字化发展需求",
"avatar": "https://img.36krcdn.com/20200411/v2_16417a06088947debe0450950f8fc813_img_png",
"last_modify_date": "2020-04-11 17:03:18",
}, {
"user_name": "未来汽车日报",
"title": "地方政府救市哪家强?广州补贴上万元,广深杭新增指标超5万",
"avatar": "https://img.36krcdn.com/20200410/v2_6905947498bc4ec0af228afed409f771_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
"last_modify_date": "2020-04-11 16:11:11",
}, {
"user_name": "未来汽车日报",
"title": "为什么自动驾驶诉讼不断?",
"avatar": "https://img.36krcdn.com/20200410/v2_9c3331af67e64994aa97a27fffb1a380_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
"last_modify_date": "2020-04-11 17:11:09",
},
]
}
},
onLoad() {
},
methods: {
/**
* 下拉刷新回调函数
*/
onPullDownRefresh() {
console.log("下拉刷新")
var that = this
setTimeout(function() {
// 顶部提示
let options = {
msg: "加载成功~",
duration: 2000,
type: "green"
};
that.$refs.toast.showTips(options);
//隐藏转圈动画
uni.stopPullDownRefresh()
}, 2000)
},
/**
* 上拉加载更多
*/
onReachBottom() {
console.log("上拉加载更多")
// 显示加载中
this.statusLoadMore = "loading"
var that = this
setTimeout(function() {
// 显示没有更多数据了
that.statusLoadMore = "nomore"
}, 2000)
},
}
}
</script>
<style >
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.image-1 {
flex-shrink: 0;
margin-right: 10px;
width: 125px;
height: 75px;
border-radius: 6px;
overflow: hidden;
border: 1px #f5f5f5 solid;
}
</style>
代码下载地址为:https://download.csdn.net/download/wy313622821/13569533
更多推荐
所有评论(0)