303 lines
9.1 KiB
Vue
303 lines
9.1 KiB
Vue
<template>
|
||
<view>
|
||
<uni-list>
|
||
<uni-list>
|
||
<!-- 垂直排列，略缩图显示大图 -->
|
||
<uni-list-item direction="column" note="Dcloud 128评论 21 赞">
|
||
<template v-slot:header>
|
||
<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
|
||
<view class="uni-thumb uni-content list-picture">
|
||
<image src="/static/logo.png" mode="aspectFill"></image>
|
||
</view>
|
||
</template>
|
||
</uni-list-item>
|
||
<!-- 垂直排列，图文混排 -->
|
||
<uni-list-item direction="column">
|
||
<template v-slot:header>
|
||
<view class="uni-title">垂直排列的图文混排列表，内容通过 body 插槽实现，底部通过 footer 插槽实现完全自定样式</view>
|
||
</template>
|
||
<template v-slot:body>
|
||
<view class="uni-list-box">
|
||
<view class="uni-thumb">
|
||
<image src="/static/logo.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="uni-content">
|
||
<view class="uni-title-sub uni-ellipsis-2">这里是列表的副标题，最多可以显示两行，多余文字会隐藏并显示省略号</view>
|
||
<view class="uni-note">Dcloud 128评论 21 赞</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-slot:footer>
|
||
<view class="uni-footer">
|
||
<text class="uni-footer-text">评论</text>
|
||
<text class="uni-footer-text">点赞</text>
|
||
<text class="uni-footer-text">分享</text>
|
||
</view>
|
||
</template>
|
||
</uni-list-item>
|
||
<!-- 垂直排列，略缩图显示多图 -->
|
||
<uni-list-item direction="column" title="" note="Dcloud 128评论 21 赞">
|
||
<template v-slot:header>
|
||
<view class="uni-title">垂直排列的多图列表，多图通过 body 插槽实现完全自定样式</view>
|
||
</template>
|
||
<template v-slot:body>
|
||
<view class="content uni-media-box">
|
||
<image v-for="img in 3" :key="img" class="uni-thumb" src="/static/logo.png"
|
||
mode="aspectFill"></image>
|
||
</view>
|
||
</template>
|
||
|
||
<template v-slot:footer>
|
||
<view class="uni-footer">
|
||
<text class="uni-footer-text">评论</text>
|
||
<text class="uni-footer-text">点赞</text>
|
||
<text class="uni-footer-text">分享</text>
|
||
</view>
|
||
</template>
|
||
</uni-list-item>
|
||
<!-- 水平排列，左图右文 -->
|
||
<uni-list-item title="水平排列的左图右文列表，图片通过 header 插槽完全自定义" note="Dcloud 128评论 21 赞">
|
||
<template v-slot:header>
|
||
<view class="uni-thumb">
|
||
<image src="/static/logo.png" mode="aspectFill"></image>
|
||
</view>
|
||
</template>
|
||
</uni-list-item>
|
||
<!-- 水平排列，右图左文 -->
|
||
<uni-list-item title="水平排列的右图左文列表，图片通过 footer 插槽完全自定义" note="Dcloud 128评论 21 赞">
|
||
<template v-slot:footer>
|
||
<view class="uni-thumb" style="margin: 0;">
|
||
<image src="/static/logo.png" mode="aspectFill"></image>
|
||
</view>
|
||
</template>
|
||
</uni-list-item>
|
||
<!-- 垂直排列，无略缩图，主标题+副标题显示 -->
|
||
<uni-list-item direction="column">
|
||
<template v-slot:header>
|
||
<view class="uni-title">垂直排列的无图列表，现在主标题+副标题</view>
|
||
</template>
|
||
<template v-slot:body>
|
||
<view class="uni-list-box">
|
||
<view class="uni-content">
|
||
<view class="uni-title-sub uni-ellipsis-2">这里是副标题 ，一般显示详情概览</view>
|
||
<view class="uni-note">Dcloud 128评论 21 赞</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-slot:footer>
|
||
<view class="uni-footer">
|
||
<text class="uni-footer-text">评论</text>
|
||
<text class="uni-footer-text">点赞</text>
|
||
<text class="uni-footer-text">分享</text>
|
||
</view>
|
||
</template>
|
||
</uni-list-item>
|
||
</uni-list>
|
||
</uni-list>
|
||
<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
|
||
<!-- <uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" /> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// mode = 1 垂直排列，略缩图显示大图
|
||
// mode = 2 垂直排列，图文混排
|
||
// mode = 3 垂直排列，略缩图显示多图
|
||
// mode = 4 水平排列，左图右文
|
||
// mode = 5 水平排列，右图左文
|
||
// mode = 6 垂直排列，无略缩图，主标题+副标题显示
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
// // 数据表名
|
||
// collection: 'opendb-news-articles',
|
||
// // 查询字段，多个字段用 , 分割
|
||
// field: '_id,mode,avatar,title,user_name,excerpt,last_modify_date',
|
||
formData: {
|
||
status: 'loading' // 加载状态
|
||
},
|
||
tipShow: false, // 是否显示顶部提示框
|
||
lists: [{
|
||
"id": 121375,
|
||
"post_id": "5310910",
|
||
"title": "为什么自动驾驶诉讼不断？",
|
||
"author_name": "未来汽车日报",
|
||
"cover": "https://img.36krcdn.com/20200411/v2_f497b1c414d5489791569b3ea99df33d_img_000",
|
||
"published_at": "2020-04-11 17:07:48",
|
||
"content": "",
|
||
"mode": 1
|
||
},
|
||
{
|
||
"id": 121374,
|
||
"post_id": "5310906",
|
||
"title": "2020数字中国创新大赛-数字政府赛道21强出炉，四大赛题紧贴政府数字化发展需求",
|
||
"author_name": "36氪深度服务",
|
||
"cover": "https://img.36krcdn.com/20200411/v2_16417a06088947debe0450950f8fc813_img_png",
|
||
"published_at": "2020-04-11 16:59:15",
|
||
"content": "",
|
||
"mode": 2
|
||
},
|
||
{
|
||
"id": 121373,
|
||
"post_id": "5310903",
|
||
"title": "地方政府救市哪家强？广州补贴上万元，广深杭新增指标超5万",
|
||
"author_name": "未来汽车日报",
|
||
"cover": "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",
|
||
"published_at": "2020-04-11 16:09:09",
|
||
"content": "",
|
||
"mode": 3
|
||
},
|
||
{
|
||
"id": 121372,
|
||
"post_id": "5310813",
|
||
"title": "救命呼吸机缺口难补！一文扒开供应链真相",
|
||
"author_name": "智东西",
|
||
"cover": "https://img.36krcdn.com/20200410/v2_86bbf8245f754be79f3386a82b385093_img_000",
|
||
"published_at": "2020-04-11 15:40:02",
|
||
"content": "",
|
||
"mode": 4
|
||
},
|
||
{
|
||
"id": 121371,
|
||
"post_id": "5309573",
|
||
"title": "每月节省32%的开支，我是怎么做到的？",
|
||
"author_name": "神译局",
|
||
"cover": "https://img.36krcdn.com/20200408/v2_c67c3edfe4b5446992b32fad93a44a75_img_png",
|
||
"published_at": "2020-04-11 14:48:02",
|
||
"content": "",
|
||
"mode": 5
|
||
},
|
||
{
|
||
"id": 121369,
|
||
"post_id": "5310859",
|
||
"title": "瓜子坚果双增长，但洽洽并不能高枕无忧",
|
||
"author_name": "资本侦探",
|
||
"cover": "https://img.36krcdn.com/20200411/v2_2204c6132432403184e43df22485545e_img_000?x-oss-process=image/resize,m_mfit,w_432,h_288/crop,w_432,h_288,g_center",
|
||
"published_at": "2020-04-11 14:23:00",
|
||
"content": "",
|
||
"mode": 6
|
||
},
|
||
{
|
||
"id": 121367,
|
||
"post_id": "5309137",
|
||
"title": "克服危机和压力，精神力量强大的人都有这5个习惯",
|
||
"author_name": "神译局",
|
||
"cover": "https://img.36krcdn.com/20200406/v2_d2c6a686b4074a1eb43603e67d6ba204_img_png",
|
||
"published_at": "2020-04-11 13:47:01",
|
||
"content": "",
|
||
"mode": 1
|
||
},
|
||
{
|
||
"id": 121365,
|
||
"post_id": "5310864",
|
||
"title": "神州租车找爹记",
|
||
"author_name": "PingWest品玩",
|
||
"cover": "https://img.36krcdn.com/20200411/v2_f497b1c414d5489791569b3ea99df33d_img_000",
|
||
"published_at": "2020-04-11 13:39:00",
|
||
"content": "",
|
||
"mode": 1
|
||
}
|
||
]
|
||
};
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
|
||
load(data, ended) {
|
||
if (ended) {
|
||
this.formData.status = 'noMore'
|
||
}
|
||
}
|
||
},
|
||
/**
|
||
* 下拉刷新回调函数
|
||
*/
|
||
onPullDownRefresh() {
|
||
this.formData.status = 'more'
|
||
this.$refs.udb.loadData({
|
||
clear: true
|
||
}, () => {
|
||
this.tipShow = true
|
||
clearTimeout(this.timer)
|
||
this.timer = setTimeout(() => {
|
||
this.tipShow = false
|
||
}, 1000)
|
||
uni.stopPullDownRefresh()
|
||
})
|
||
},
|
||
/**
|
||
* 上拉加载回调函数
|
||
*/
|
||
onReachBottom() {
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
@import '@/common/uni-ui.scss';
|
||
|
||
page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
background-color: #efeff4;
|
||
min-height: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.tips {
|
||
color: #67c23a;
|
||
font-size: 14px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
background-color: #f0f9eb;
|
||
height: 0;
|
||
opacity: 0;
|
||
transform: translateY(-100%);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.tips-ani {
|
||
transform: translateY(0);
|
||
height: 40px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
display: flex;
|
||
}
|
||
|
||
.list-picture {
|
||
width: 100%;
|
||
height: 145px;
|
||
}
|
||
|
||
.thumb-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.ellipsis {
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.uni-ellipsis-1 {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.uni-ellipsis-2 {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
</style>
|