XiXingWL/AnHanNET-UniAPP
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加商品列表 视频列表 文章列表等样式代码

Browse Source 
Signed-off-by: YangWork <yang@xixingwl.cn>
This commit is contained in:
YangWork
2023-02-15 17:52:06 +08:00
parent 2ad0f3495b
commit 1a0c4482a3
8 changed files with 1806 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
pages/tabbar/dynamics/dynamics.vue
View File

@@ -1,22 +1,302 @@
<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'
}
}
},
methods: {
/**
* 下拉刷新回调函数
*/
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>
<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>