开始

打开下拉刷新的功能
image.png
默认是关闭的
image.png

image.png

  1. "enablePullDownRefresh": true, // 开启下拉刷新

image.png

拉完后一直转圈。我们需要手动关闭他
image.png

image.png

image.png

image.png

  1. onPullDownRefresh() {
  3. },

image.png
手动关闭下拉刷新。
image.png
2秒后关闭下拉刷新
image.png

  1. onPullDownRefresh() {
  2.             setTimeout(() => {
  3.                 uni.stopPullDownRefresh();
  4.             }, 2000);
  5.         },

image.png
2秒后关闭
image.png

模拟上拉刷新数据

三步
image.png

image.png

  1. onPullDownRefresh() {
  2.             this.getdata();
  3.         },
  1. // 上拉刷新
  2.             getdata() {
  3.                 // 获取数据
  5.                 // 赋值
  7.                 // 关闭下拉刷新
  8.                 setTimeout(() => {
  9.                     uni.stopPullDownRefresh();
  10.                 }, 2000);
  11.             },

复制一份数据
image.png
声明变量，假设这是刚获取的数据
image.png

image.png
变量放在setTimeOut里面
image.png

  1. // 上拉刷新
  2.             getdata() {
  3.                 // 获取数据
  4.                 // 获取数据
  5.                 let arr = [
  6.                     // 文字
  7.                     {
  8.                         userpic: "../../static/demo/userpic/12.jpg",
  9.                         username: "哈哈111111",
  10.                         sex: 0, //0 男 1 女
  11.                         age: 25,
  12.                         isguanzhu: false,
  13.                         title: "我是标题11111",
  14.                         titlepic: "",
  15.                         video: false,
  16.                         share: false,
  17.                         path: "深圳 龙岗",
  18.                         sharenum: 20,
  19.                         commentnum: 30,
  20.                         goodnum: 20
  21.                     },
  22.                     // 图文
  23.                     {
  24.                         userpic: "../../static/demo/userpic/12.jpg",
  25.                         username: "哈哈",
  26.                         sex: 0, //0 男 1 女
  27.                         age: 25,
  28.                         isguanzhu: false,
  29.                         title: "我是标题",
  30.                         titlepic: "../../static/demo/datapic/13.jpg",
  31.                         video: false,
  32.                         share: false,
  33.                         path: "深圳 龙岗",
  34.                         sharenum: 20,
  35.                         commentnum: 30,
  36.                         goodnum: 20
  37.                     },
  38.                     // 视频
  39.                     {
  40.                         userpic: "../../static/demo/userpic/12.jpg",
  41.                         username: "哈哈",
  42.                         sex: 0, //0 男 1 女
  43.                         age: 25,
  44.                         isguanzhu: false,
  45.                         title: "我是标题",
  46.                         titlepic: "../../static/demo/datapic/13.jpg",
  47.                         video: {
  48.                             looknum: "20w",
  49.                             long: "2:47"
  50.                         },
  51.                         share: false,
  52.                         path: "深圳 龙岗",
  53.                         sharenum: 20,
  54.                         commentnum: 30,
  55.                         goodnum: 20
  56.                     },
  57.                 ];
  58.                 // 赋值
  59.                 this.tablist[this.tabIndex].list = arr;
  61.                 // 关闭下拉刷新
  62.                 setTimeout(() => {
  63.                     uni.stopPullDownRefresh();
  64.                 }, 2000);
  65.             },

测试

image.png
新的测试数据
image.png

本节代码

  1. <template>
  2.     <view>
  3.         <!-- 话题介绍 -->
  4.         <topic-info :item="topicInfo"></topic-info>
  5.         <!-- tabbar切换 -->
  6.         <swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap" scrollStyle="border-bottom:0;"
  7.             scrollItemStyle="width:50%;">
  8.         </swiper-tab-head>
  9.         <view class="topic-detail-list" :style="{height: swiperheight+'px'}">
  10.             <block v-for="(item,index) in tablist" :key="index">
  11.                 <template v-if="tabIndex==index">
  12.                     <block v-for="(list,listindex) in item.list" :key="listindex">
  13.                         <common-list :item="list" :index="listindex"></common-list>
  14.                     </block>
  15.                     <!-- 上拉加载 -->
  16.                     <load-more :loadtext="item.loadtext"></load-more>
  17.                 </template>
  18.             </block>
  19.         </view>
  20.     </view>
  21. </template>
  23. <script>
  24.     import topicInfo from '@/components/topic/topic-info.vue';
  25.     import swiperTabHead from '@/components/index/swiper-tab-head.vue';
  26.     import commonList from '@/components/common/common-list.vue';
  27.     import loadMore from '@/components/common/load-more.vue';
  28.     export default {
  29.         components: {
  30.             topicInfo,
  31.             swiperTabHead,
  32.             commonList,
  33.             commonList,
  34.             loadMore
  35.         },
  36.         data() {
  37.             return {
  38.                 swiperheight: 500,
  39.                 srcollTopValue: 0, // 默认是0
  40.                 topicInfo: {
  41.                     titlepic: "../../static/demo/topicpic/13.jpeg",
  42.                     title: "忆往事，敬余生",
  43.                     desc: "我是描述",
  44.                     totalnum: 1000,
  45.                     todaynum: 1000,
  46.                 },
  47.                 tabIndex: 0,
  48.                 tabBars: [{
  49.                         name: "默认",
  50.                         id: "moren"
  51.                     },
  52.                     {
  53.                         name: "最新",
  54.                         id: "zuixin"
  55.                     },
  56.                 ],
  57.                 tablist: [{
  58.                         loadtext: "上拉加载更多",
  59.                         list: [
  60.                             // 文字
  61.                             {
  62.                                 userpic: "../../static/demo/userpic/12.jpg",
  63.                                 username: "哈哈",
  64.                                 sex: 0, //0 男 1 女
  65.                                 age: 25,
  66.                                 isguanzhu: false,
  67.                                 title: "我是标题",
  68.                                 titlepic: "",
  69.                                 video: false,
  70.                                 share: false,
  71.                                 path: "深圳 龙岗",
  72.                                 sharenum: 20,
  73.                                 commentnum: 30,
  74.                                 goodnum: 20
  75.                             },
  76.                             // 图文
  77.                             {
  78.                                 userpic: "../../static/demo/userpic/12.jpg",
  79.                                 username: "哈哈",
  80.                                 sex: 0, //0 男 1 女
  81.                                 age: 25,
  82.                                 isguanzhu: false,
  83.                                 title: "我是标题",
  84.                                 titlepic: "../../static/demo/datapic/13.jpg",
  85.                                 video: false,
  86.                                 share: false,
  87.                                 path: "深圳 龙岗",
  88.                                 sharenum: 20,
  89.                                 commentnum: 30,
  90.                                 goodnum: 20
  91.                             },
  92.                             // 视频
  93.                             {
  94.                                 userpic: "../../static/demo/userpic/12.jpg",
  95.                                 username: "哈哈",
  96.                                 sex: 0, //0 男 1 女
  97.                                 age: 25,
  98.                                 isguanzhu: false,
  99.                                 title: "我是标题",
  100.                                 titlepic: "../../static/demo/datapic/13.jpg",
  101.                                 video: {
  102.                                     looknum: "20w",
  103.                                     long: "2:47"
  104.                                 },
  105.                                 share: false,
  106.                                 path: "深圳 龙岗",
  107.                                 sharenum: 20,
  108.                                 commentnum: 30,
  109.                                 goodnum: 20
  110.                             },
  111.                         ]
  112.                     },
  113.                     {
  114.                         loadtext: "上拉加载更多",
  115.                         list: [
  116.                             // 文字
  117.                             {
  118.                                 userpic: "../../static/demo/userpic/12.jpg",
  119.                                 username: "哈哈",
  120.                                 sex: 0, //0 男 1 女
  121.                                 age: 25,
  122.                                 isguanzhu: false,
  123.                                 title: "我是标题",
  124.                                 titlepic: "",
  125.                                 video: false,
  126.                                 share: false,
  127.                                 path: "深圳 龙岗",
  128.                                 sharenum: 20,
  129.                                 commentnum: 30,
  130.                                 goodnum: 20
  131.                             },
  132.                             // 图文
  133.                             {
  134.                                 userpic: "../../static/demo/userpic/12.jpg",
  135.                                 username: "哈哈",
  136.                                 sex: 0, //0 男 1 女
  137.                                 age: 25,
  138.                                 isguanzhu: false,
  139.                                 title: "我是标题",
  140.                                 titlepic: "../../static/demo/datapic/13.jpg",
  141.                                 video: false,
  142.                                 share: false,
  143.                                 path: "深圳 龙岗",
  144.                                 sharenum: 20,
  145.                                 commentnum: 30,
  146.                                 goodnum: 20
  147.                             },
  148.                             // 视频
  149.                             {
  150.                                 userpic: "../../static/demo/userpic/12.jpg",
  151.                                 username: "哈哈",
  152.                                 sex: 0, //0 男 1 女
  153.                                 age: 25,
  154.                                 isguanzhu: false,
  155.                                 title: "我是标题",
  156.                                 titlepic: "../../static/demo/datapic/13.jpg",
  157.                                 video: {
  158.                                     looknum: "20w",
  159.                                     long: "2:47"
  160.                                 },
  161.                                 share: false,
  162.                                 path: "深圳 龙岗",
  163.                                 sharenum: 20,
  164.                                 commentnum: 30,
  165.                                 goodnum: 20
  166.                             },
  167.                         ]
  168.                     },
  169.                 ]
  170.             }
  171.         },
  172.         onLoad() {
  173.             uni.getSystemInfo({
  174.                 success: (res) => {
  175.                     console.log('当前window高度和窗口高度');
  176.                     console.log(res.windowHeight);
  177.                     console.log(res.screenHeight);
  178.                     let height = res.windowHeight - uni.upx2px(100)
  179.                     this.swiperheight = height;
  180.                 }
  181.             });
  182.         },
  183.         onPullDownRefresh() {
  184.             this.getdata();
  185.         },
  186.         onReachBottom() {
  187.             this.loadmore();
  188.         },
  189.         methods: {
  190.             // 上拉刷新
  191.             getdata() {
  192.                 // 获取数据
  193.                 // 获取数据
  194.                 let arr = [
  195.                     // 文字
  196.                     {
  197.                         userpic: "../../static/demo/userpic/12.jpg",
  198.                         username: "哈哈111111",
  199.                         sex: 0, //0 男 1 女
  200.                         age: 25,
  201.                         isguanzhu: false,
  202.                         title: "我是标题11111",
  203.                         titlepic: "",
  204.                         video: false,
  205.                         share: false,
  206.                         path: "深圳 龙岗",
  207.                         sharenum: 20,
  208.                         commentnum: 30,
  209.                         goodnum: 20
  210.                     },
  211.                     // 图文
  212.                     {
  213.                         userpic: "../../static/demo/userpic/12.jpg",
  214.                         username: "哈哈",
  215.                         sex: 0, //0 男 1 女
  216.                         age: 25,
  217.                         isguanzhu: false,
  218.                         title: "我是标题",
  219.                         titlepic: "../../static/demo/datapic/13.jpg",
  220.                         video: false,
  221.                         share: false,
  222.                         path: "深圳 龙岗",
  223.                         sharenum: 20,
  224.                         commentnum: 30,
  225.                         goodnum: 20
  226.                     },
  227.                     // 视频
  228.                     {
  229.                         userpic: "../../static/demo/userpic/12.jpg",
  230.                         username: "哈哈",
  231.                         sex: 0, //0 男 1 女
  232.                         age: 25,
  233.                         isguanzhu: false,
  234.                         title: "我是标题",
  235.                         titlepic: "../../static/demo/datapic/13.jpg",
  236.                         video: {
  237.                             looknum: "20w",
  238.                             long: "2:47"
  239.                         },
  240.                         share: false,
  241.                         path: "深圳 龙岗",
  242.                         sharenum: 20,
  243.                         commentnum: 30,
  244.                         goodnum: 20
  245.                     },
  246.                 ];
  247.                 // 赋值
  248.                 this.tablist[this.tabIndex].list = arr;
  250.                 // 关闭下拉刷新
  251.                 setTimeout(() => {
  252.                     uni.stopPullDownRefresh();
  253.                 }, 2000);
  254.             },
  255.             // tabbar点击事件
  256.             tabtap(index) {
  257.                 // console.log(index);
  258.                 this.tabIndex = index;
  259.             },
  260.             // 上拉加载
  261.             loadmore() {
  262.                 if (this.tablist[this.tabIndex].loadtext != "上拉加载更多") {
  263.                     return;
  264.                 }
  265.                 // 修改状态
  266.                 this.tablist[this.tabIndex].loadtext = "加载中...";
  267.                 // 获取数据
  268.                 setTimeout(() => {
  269.                     //获取完成
  270.                     let obj = {
  271.                         userpic: "../../static/demo/userpic/12.jpg",
  272.                         username: "哈哈",
  273.                         sex: 0, //0 男 1 女
  274.                         age: 25,
  275.                         isguanzhu: false,
  276.                         title: "我是标题",
  277.                         titlepic: "../../static/demo/datapic/13.jpg",
  278.                         video: false,
  279.                         share: false,
  280.                         path: "深圳 龙岗",
  281.                         sharenum: 20,
  282.                         commentnum: 30,
  283.                         goodnum: 20
  284.                     };
  285.                     this.tablist[this.tabIndex].list.push(obj);
  286.                     this.tablist[this.tabIndex].loadtext = "上拉加载更多";
  287.                 }, 1000);
  288.             }
  289.         }
  290.     }
  291. </script>
  293. <style>
  295. </style>

结束