gx

src/components/list-right-img.vue

@@ -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;
         }
       }
     }

src/views/znyt.vue

@@ -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 {