开始

话题详情页的，上拉加载
参考动态页的关注。底部也有上拉加载。
image.png
复制组件的引用
image.png

  1. import loadMore from '@/components/common/load-more.vue';

image.png

  1. <!-- 上拉加载 -->
  2. <load-more :loadtext="guanzhu.loadtext"></load-more>

image.png

H5端-wjw

在我的H5端 要想显示最底部，必须要动态的计算出总的高度来，然后通过滚动条滚动到最底部。
image.png
给最外层的这个topic-detail-list加上 动态计算出来的高度。

  1. :style="{height: swiperheight+'px'}"

image.png

  1. swiperheight: 500,

image.png

  1. onLoad() {
  2.             uni.getSystemInfo({
  3.                 success: (res) => {
  4.                     console.log('当前window高度和窗口高度');
  5.                     console.log(res.windowHeight);
  6.                     console.log(res.screenHeight);
  7.                     let height = res.windowHeight - uni.upx2px(100)
  8.                     this.swiperheight = height;
  9.                 }
  10.             });
  11.         },

继续

页面监听加载更多的事件
image.png
页面上拉触底事件的处理函数
image.png
复制news页面的loadMore方法
image.png

  1. // 上拉加载
  2.             loadmore() {
  3.                 if (this.guanzhu.loadtext != "上拉加载更多") {
  4.                     return;
  5.                 }
  6.                 // 修改状态
  7.                 this.guanzhu.loadtext = "加载中...";
  8.                 // 获取数据
  9.                 setTimeout(() => {
  10.                     //获取完成
  11.                     let obj = {
  12.                         userpic: "../../static/demo/userpic/12.jpg",
  13.                         username: "哈哈",
  14.                         sex: 0, //0 男 1 女
  15.                         age: 25,
  16.                         isguanzhu: false,
  17.                         title: "我是标题",
  18.                         titlepic: "../../static/demo/datapic/13.jpg",
  19.                         video: false,
  20.                         share: false,
  21.                         path: "深圳 龙岗",
  22.                         sharenum: 20,
  23.                         commentnum: 30,
  24.                         goodnum: 20
  25.                     };
  26.                     this.guanzhu.list.push(obj);
  27.                     this.guanzhu.loadtext = "上拉加载更多";
  28.                 }, 1000);
  29.                 // this.guanzhu.loadtext="没有更多数据了";
  30.             }

当前选中的tab的索引的数据
image.png

image.png

  1. // 上拉加载
  2.             loadmore() {
  3.                 if (this.tablist[this.tabIndex].loadtext != "上拉加载更多") {
  4.                     return;
  5.                 }
  6.                 // 修改状态
  7.                 this.tablist[this.tabIndex].loadtext = "加载中...";
  8.                 // 获取数据
  9.                 setTimeout(() => {
  10.                     //获取完成
  11.                     let obj = {
  12.                         userpic: "../../static/demo/userpic/12.jpg",
  13.                         username: "哈哈",
  14.                         sex: 0, //0 男 1 女
  15.                         age: 25,
  16.                         isguanzhu: false,
  17.                         title: "我是标题",
  18.                         titlepic: "../../static/demo/datapic/13.jpg",
  19.                         video: false,
  20.                         share: false,
  21.                         path: "深圳 龙岗",
  22.                         sharenum: 20,
  23.                         commentnum: 30,
  24.                         goodnum: 20
  25.                     };
  26.                     this.tablist[this.tabIndex].list.push(obj);
  27.                     this.tablist[this.tabIndex].loadtext = "上拉加载更多";
  28.                 }, 1000);
  29.             }

image.png
调用方法
image.png

  1. onReachBottom() {
  2.             this.loadmore();
  3.         },

image.png

本节代码

topic-detail.vue页面

  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.         onReachBottom() {
  184.             this.loadmore();
  185.         },
  186.         methods: {
  187.             // tabbar点击事件
  188.             tabtap(index) {
  189.                 // console.log(index);
  190.                 this.tabIndex = index;
  191.             },
  192.             // 上拉加载
  193.             loadmore() {
  194.                 if (this.tablist[this.tabIndex].loadtext != "上拉加载更多") {
  195.                     return;
  196.                 }
  197.                 // 修改状态
  198.                 this.tablist[this.tabIndex].loadtext = "加载中...";
  199.                 // 获取数据
  200.                 setTimeout(() => {
  201.                     //获取完成
  202.                     let obj = {
  203.                         userpic: "../../static/demo/userpic/12.jpg",
  204.                         username: "哈哈",
  205.                         sex: 0, //0 男 1 女
  206.                         age: 25,
  207.                         isguanzhu: false,
  208.                         title: "我是标题",
  209.                         titlepic: "../../static/demo/datapic/13.jpg",
  210.                         video: false,
  211.                         share: false,
  212.                         path: "深圳 龙岗",
  213.                         sharenum: 20,
  214.                         commentnum: 30,
  215.                         goodnum: 20
  216.                     };
  217.                     this.tablist[this.tabIndex].list.push(obj);
  218.                     this.tablist[this.tabIndex].loadtext = "上拉加载更多";
  219.                 }, 1000);
  220.             }
  221.         }
  222.     }
  223. </script>
  225. <style>
  227. </style>

结束