开始

开启下拉刷新的功能
image.png

  1. "enablePullDownRefresh": true,

image.png

  1. // 监听下拉刷新
  2.         onPullDownRefresh() {
  4.         },

把逻辑尽量写在methods里面
image.png

image.png

  1. // 获取数据
  2.             getdata() {
  3.                 // 服务器获取数据
  4.                 // 赋值
  5.                 // 关闭下下拉刷新
  7.             }

定义变量，把原有的数据赋值过来
image.png
随便改点内容
image.png
输入ustop
image.png

image.png

定时器来模拟。setTimeOut 改成es6语法。里面可以用this对象。
image.png
image.png

image.png

本节代码

  1. <template>
  2.     <view class="body">
  3.         <!-- 小纸条列表 -->
  4.         <block v-for="(item,index) in list" :key="index">
  5.             <paper-list :item="item" :index="index"></paper-list>
  6.         </block>
  7.     </view>
  8. </template>
  10. <script>
  11.     import paperList from '@/components/paper/paper-list.vue';
  12.     export default {
  13.         components: {
  14.             paperList
  15.         },
  16.         data() {
  17.             return {
  18.                 list: [{
  19.                         userpic: "../../static/demo/userpic/12.jpg",
  20.                         username: "昵称",
  21.                         time: "10:21",
  22.                         data: "我是信息",
  23.                         noreadnum: 2
  24.                     },
  25.                     {
  26.                         userpic: "../../static/demo/userpic/12.jpg",
  27.                         username: "昵称",
  28.                         time: "10:21",
  29.                         data: "我是信息",
  30.                         noreadnum: 0
  31.                     },
  32.                     {
  33.                         userpic: "../../static/demo/userpic/12.jpg",
  34.                         username: "昵称",
  35.                         time: "10:21",
  36.                         data: "我是信息",
  37.                         noreadnum: 0
  38.                     },
  39.                     {
  40.                         userpic: "../../static/demo/userpic/12.jpg",
  41.                         username: "昵称",
  42.                         time: "10:21",
  43.                         data: "我是信息",
  44.                         noreadnum: 11
  45.                     }
  46.                 ]
  47.             }
  48.         },
  49.         // 监听下拉刷新
  50.         onPullDownRefresh() {
  51.             this.getdata()
  52.         },
  53.         methods: {
  54.             // 获取数据
  55.             getdata() {
  56.                 setTimeout(() => {
  57.                     // 服务器获取数据
  58.                     let arr = [{
  59.                             userpic: "../../static/demo/userpic/12.jpg",
  60.                             username: "昵称1111",
  61.                             time: "10:21",
  62.                             data: "我是信息",
  63.                             noreadnum: 2
  64.                         },
  65.                         {
  66.                             userpic: "../../static/demo/userpic/12.jpg",
  67.                             username: "昵称222",
  68.                             time: "10:21",
  69.                             data: "我是信息",
  70.                             noreadnum: 0
  71.                         },
  72.                         {
  73.                             userpic: "../../static/demo/userpic/12.jpg",
  74.                             username: "昵称333",
  75.                             time: "10:21",
  76.                             data: "我是信息",
  77.                             noreadnum: 0
  78.                         },
  79.                         {
  80.                             userpic: "../../static/demo/userpic/12.jpg",
  81.                             username: "昵称444",
  82.                             time: "10:21",
  83.                             data: "我是信息",
  84.                             noreadnum: 11
  85.                         }
  86.                     ];
  87.                     // 赋值
  88.                     this.list = arr;
  89.                     // 关闭下拉刷新
  90.                     uni.stopPullDownRefresh();
  91.                 }, 2000);
  93.             }
  94.         }
  95.     }
  96. </script>
  98. <style>
  99.     .body {
  100.         padding: 0 20upx;
  101.     }
  102. </style>

结束