This commit is contained in:
parent
d79a732b0d
commit
06607684a2
|
@ -39,42 +39,6 @@ const quanwen = () => {
|
|||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.noDevelop {
|
||||
display: inline-block;
|
||||
width: 231px;
|
||||
height: 44px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 35px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
color: #87ceeb;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.noDevelop::after {
|
||||
content: "...";
|
||||
width: 16px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 35px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.yesDevelop {
|
||||
display: inline-block;
|
||||
// width: 231px;
|
||||
|
@ -106,6 +70,7 @@ const quanwen = () => {
|
|||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 4px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -39,7 +39,13 @@
|
|||
<img src="@/assets/list.png" alt="" />
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="list-item">
|
||||
<van-pull-refresh v-model="loadingSx" @refresh="onRefresh">
|
||||
<van-list
|
||||
v-model:loading="loadings"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
>
|
||||
<div v-for="(data, index) in records.list" :key="data.id">
|
||||
<listNoImg v-if="data.display == 0" :newData="data" />
|
||||
<listRightImg v-if="data.display == 1" :newData="data" />
|
||||
|
@ -47,17 +53,22 @@
|
|||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import listRightImg from "@/components/list-right-img.vue";
|
||||
import listNoImg from "@/components/list-no-img.vue";
|
||||
import j1 from "../assets/cc4.png";
|
||||
import j2 from "../assets/cc3.png";
|
||||
import { showSuccessToast } from "vant";
|
||||
const loadingSx = ref(false);
|
||||
const loadings = ref(false);
|
||||
const finished = ref(false);
|
||||
const topContent = reactive([
|
||||
{
|
||||
content: "2024年养老金发放政策:工龄30年内统一发放3200元,可行吗?",
|
||||
|
@ -99,7 +110,74 @@ const mainList = reactive([
|
|||
const chooseId = ref("1");
|
||||
const choose = (id) => {
|
||||
chooseId.value = id;
|
||||
scolltop();
|
||||
// console.log()
|
||||
records.list = [
|
||||
{
|
||||
id: 1,
|
||||
display: 1,
|
||||
title: "“三问”个人养老金:是什么、怎么缴、如何领?",
|
||||
createdAt: "11月27日",
|
||||
imgUrl: j1,
|
||||
eye: "8888",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
display: 1,
|
||||
title: "100场社区活动——教你轻松玩转智能手机",
|
||||
createdAt: "11月27日",
|
||||
imgUrl: j2,
|
||||
eye: "8888",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
display: 1,
|
||||
title: "“三问”个人养老金:是什么、怎么缴、如何领?",
|
||||
createdAt: "11月27日",
|
||||
imgUrl: j1,
|
||||
eye: "8888",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
display: 1,
|
||||
title: "100场社区活动——教你轻松玩转智能手机",
|
||||
createdAt: "11月27日",
|
||||
imgUrl: j2,
|
||||
eye: "8888",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
display: 1,
|
||||
title: "“三问”个人养老金:是什么、怎么缴、如何领?",
|
||||
createdAt: "11月27日",
|
||||
imgUrl: j1,
|
||||
eye: "8888",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
display: 1,
|
||||
title: "100场社区活动——教你轻松玩转智能手机",
|
||||
createdAt: "11月27日",
|
||||
imgUrl: j2,
|
||||
eye: "8888",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
display: 1,
|
||||
title: "“三问”个人养老金:是什么、怎么缴、如何领?",
|
||||
createdAt: "11月27日",
|
||||
imgUrl: j1,
|
||||
eye: "8888",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
display: 1,
|
||||
title: "100场社区活动——教你轻松玩转智能手机",
|
||||
createdAt: "11月27日",
|
||||
imgUrl: j2,
|
||||
eye: "8888",
|
||||
},
|
||||
];
|
||||
};
|
||||
const records = reactive({
|
||||
list: [
|
||||
|
@ -143,6 +221,33 @@ const records = reactive({
|
|||
},
|
||||
],
|
||||
});
|
||||
const onRefresh = () => {
|
||||
setTimeout(() => {
|
||||
showSuccessToast("刷新成功");
|
||||
loadingSx.value = false;
|
||||
}, 1000);
|
||||
};
|
||||
const onLoad = () => {
|
||||
// 异步更新数据
|
||||
// setTimeout 仅做示例,真实场景中一般为 ajax 请求
|
||||
setTimeout(() => {
|
||||
// 加载状态结束
|
||||
loadings.value = false;
|
||||
// 数据全部加载完成
|
||||
finished.value = true;
|
||||
}, 1000);
|
||||
};
|
||||
const scolltop = () => {
|
||||
nextTick(() => {
|
||||
let list = document.getElementsByClassName("list");
|
||||
if (list) {
|
||||
list.scrollTop = 0; // 滚动高度
|
||||
}
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
// showToast("666")
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.body {
|
||||
|
|
Loading…
Reference in New Issue