开始

关注列表里面的，上拉加载功能

首页做过，直接复制首页的上拉加载代码。

复制之前做好的loadMore组件
image.png

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

image.png
使用 组件
image.png

  1. <!-- 上拉加载 -->
  2. <load-more></load-more>

把list放在新定义的关注里面
image.png
image.png

  1. guanzhu:{
  2.                     loadtext:"上拉加载更多",
  3.                     list:[
  4.                         // 文字
  5.                         {
  6.                             userpic:"../../static/demo/userpic/12.jpg",
  7.                             username:"哈哈",
  8.                             sex:0, //0 男 1 女
  9.                             age:25,
  10.                             isguanzhu:false,
  11.                             title:"我是标题",
  12.                             titlepic:"",
  13.                             video:false,
  14.                             share:false,
  15.                             path:"深圳 龙岗",
  16.                             sharenum:20,
  17.                             commentnum:30,
  18.                             goodnum:20
  19.                         },
  20.                         // 图文
  21.                         {
  22.                             userpic:"../../static/demo/userpic/12.jpg",
  23.                             username:"哈哈",
  24.                             sex:0, //0 男 1 女
  25.                             age:25,
  26.                             isguanzhu:false,
  27.                             title:"我是标题",
  28.                             titlepic:"../../static/demo/datapic/13.jpg",
  29.                             video:false,
  30.                             share:false,
  31.                             path:"深圳 龙岗",
  32.                             sharenum:20,
  33.                             commentnum:30,
  34.                             goodnum:20
  35.                         },
  36.                         // 视频
  37.                         {
  38.                             userpic:"../../static/demo/userpic/12.jpg",
  39.                             username:"哈哈",
  40.                             sex:0, //0 男 1 女
  41.                             age:25,
  42.                             isguanzhu:false,
  43.                             title:"我是标题",
  44.                             titlepic:"../../static/demo/datapic/13.jpg",
  45.                             video:{
  46.                                 looknum:"20w",
  47.                                 long:"2:47"
  48.                             },
  49.                             share:false,
  50.                             path:"深圳 龙岗",
  51.                             sharenum:20,
  52.                             commentnum:30,
  53.                             goodnum:20
  54.                         },
  55.                         // 分享
  56.                         {
  57.                             userpic:"../../static/demo/userpic/12.jpg",
  58.                             username:"哈哈",
  59.                             sex:0, //0 男 1 女
  60.                             age:25,
  61.                             isguanzhu:false,
  62.                             title:"我是标题",
  63.                             titlepic:"",
  64.                             video:false,
  65.                             share:{
  66.                                 title:"我是分享的标题",
  67.                                 titlepic:"../../static/demo/datapic/14.jpg"
  68.                             },
  69.                             path:"深圳 龙岗",
  70.                             sharenum:20,
  71.                             commentnum:30,
  72.                             goodnum:20
  73.                         },
  74.                     ]
  75.                 }

循环guan.list
image.png

  1. <block v-for="(item,index) in guanzhu.list" :ket="index">

image.png

  1. <load-more :loadtext="guanzhu.loadtext"></load-more>

监听处理事件
image.png

  1. @scrolltolower="loadmore(index)"

复制首页上拉加载的代码
image.png
替换关键字
image.png
复制图文的数据到这里。
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.             }

image.png
啦到底部，加载了新的
image.png
会有回弹的效果。如果不喜欢可以禁用掉。
首页是在这里加的。
image.png
加上这句话就可以了。
image.png

  1. "bounce": "none", // 关闭反弹效果

最终修改注意事项。

按照视频中编写代码后，无法触发触底的事件，
解决方法如下：
在scroll-view上加上scroll-top的属性。srcollTopValue这个是自定义的属性值。
同时给scroll-view也加上高度是页面加载后计算出来的高度。
image.png

image.png
scroll事件。滚动条以滚动 就更新滚动条的高度
image.png

最终代码

news.vue

  1. <template>
  2.     <view>
  4.         <news-nav-bar :tabBars="tabBars" :tabIndex="tabIndex" @change-tab="changeTab"></news-nav-bar>
  7.         <view>
  8.             <swiper class="swiper-box" :style="{height: swiperheight+'px'}" :current="tabIndex" :change="tabChange">
  9.                 <!-- 关注 -->
  10.                 <swiper-item>
  11.                     <scroll-view scroll-y class="list" 
  12.                     @scrolltolower="loadmore(index)" 
  13.                     @scroll="scroll" 
  14.                     :scroll-top="srcollTopValue"
  15.                     :style="{height: swiperheight+'px'}">
  16.                         <!-- 列表 -->
  17.                         <block v-for="(item,index) in guanzhu.list" :ket="index">
  18.                             <common-list :item="item" :index="index"></common-list>
  19.                         </block>
  20.                         <!-- 上拉加载 -->
  21.                         <load-more :loadtext="guanzhu.loadtext"></load-more>
  22.                     </scroll-view>
  23.                 </swiper-item>
  24.                 <!-- 话题 -->
  25.                 <swiper-item>
  26.                     <scroll-view scroll-y class="list">
  27.                         话题
  28.                     </scroll-view>
  29.                 </swiper-item>
  30.             </swiper>
  31.         </view>
  33.     </view>
  34. </template>
  36. <script>
  37.     import commonList from '@/components/common/common-list.vue';
  38.     import newsNavBar from '@/components/news/news-nav-bar.vue';
  39.     import loadMore from '@/components/common/load-more.vue';
  40.     export default {
  41.         components: {
  42.             commonList,
  43.             newsNavBar,
  44.             loadMore
  45.         },
  46.         data() {
  47.             return {
  48.                 swiperheight: 500,
  49.                 srcollTopValue:0, // 默认是0
  50.                 tabIndex: 0,
  51.                 tabBars: [{
  52.                         name: '关注',
  53.                         id: 'guanzhu'
  54.                     },
  55.                     {
  56.                         name: '话题',
  57.                         id: 'toppic'
  58.                     },
  59.                 ],
  60.                 guanzhu: {
  61.                     loadtext: "上拉加载更多",
  62.                     list: [
  63.                         // 文字
  64.                         {
  65.                             userpic: "../../static/demo/userpic/12.jpg",
  66.                             username: "哈哈",
  67.                             sex: 0, //0 男 1 女
  68.                             age: 25,
  69.                             isguanzhu: false,
  70.                             title: "我是标题",
  71.                             titlepic: "",
  72.                             video: false,
  73.                             share: false,
  74.                             path: "深圳 龙岗",
  75.                             sharenum: 20,
  76.                             commentnum: 30,
  77.                             goodnum: 20
  78.                         },
  79.                         // 图文
  80.                         {
  81.                             userpic: "../../static/demo/userpic/12.jpg",
  82.                             username: "哈哈",
  83.                             sex: 0, //0 男 1 女
  84.                             age: 25,
  85.                             isguanzhu: false,
  86.                             title: "我是标题",
  87.                             titlepic: "../../static/demo/datapic/13.jpg",
  88.                             video: false,
  89.                             share: false,
  90.                             path: "深圳 龙岗",
  91.                             sharenum: 20,
  92.                             commentnum: 30,
  93.                             goodnum: 20
  94.                         },
  95.                         // 视频
  96.                         {
  97.                             userpic: "../../static/demo/userpic/12.jpg",
  98.                             username: "哈哈",
  99.                             sex: 0, //0 男 1 女
  100.                             age: 25,
  101.                             isguanzhu: false,
  102.                             title: "我是标题",
  103.                             titlepic: "../../static/demo/datapic/13.jpg",
  104.                             video: {
  105.                                 looknum: "20w",
  106.                                 long: "2:47"
  107.                             },
  108.                             share: false,
  109.                             path: "深圳 龙岗",
  110.                             sharenum: 20,
  111.                             commentnum: 30,
  112.                             goodnum: 20
  113.                         },
  114.                         // 分享
  115.                         {
  116.                             userpic: "../../static/demo/userpic/12.jpg",
  117.                             username: "哈哈",
  118.                             sex: 0, //0 男 1 女
  119.                             age: 25,
  120.                             isguanzhu: false,
  121.                             title: "我是标题",
  122.                             titlepic: "",
  123.                             video: false,
  124.                             share: {
  125.                                 title: "我是分享的标题",
  126.                                 titlepic: "../../static/demo/datapic/14.jpg"
  127.                             },
  128.                             path: "深圳 龙岗",
  129.                             sharenum: 20,
  130.                             commentnum: 30,
  131.                             goodnum: 20
  132.                         },
  133.                     ]
  134.                 }
  135.             }
  136.         },
  137.         onLoad() {
  138.             uni.getSystemInfo({
  139.                 success: (res) => {
  140.                     console.log('当前window高度和窗口高度');
  141.                     console.log(res.windowHeight);
  142.                     console.log(res.screenHeight);
  143.                     let height = res.windowHeight - uni.upx2px(100)
  144.                     this.swiperheight = height;
  145.                 }
  146.             });
  147.         },
  148.         methods: {
  149.             scroll(e){
  150.                 // console.log('scroll事件',e);
  151.                 this.scrollTopValue=e.detail.scrollTop;
  152.             },
  153.             // 点击切换
  154.             changeTab(index) {
  155.                 console.log('父页面点击:', index);
  156.                 this.tabIndex = index;
  157.             },
  158.             // 滑动事件
  159.             tabChange(e) {
  160.                 this.tabIndex = e.details.current
  161.             },
  162.             // 上拉加载
  163.             loadmore() {
  164.                 if (this.guanzhu.loadtext != "上拉加载更多") {
  165.                     return;
  166.                 }
  167.                 // 修改状态
  168.                 this.guanzhu.loadtext = "加载中...";
  169.                 // 获取数据
  170.                 setTimeout(() => {
  171.                     //获取完成
  172.                     let obj = {
  173.                         userpic: "../../static/demo/userpic/12.jpg",
  174.                         username: "哈哈",
  175.                         sex: 0, //0 男 1 女
  176.                         age: 25,
  177.                         isguanzhu: false,
  178.                         title: "我是标题",
  179.                         titlepic: "../../static/demo/datapic/13.jpg",
  180.                         video: false,
  181.                         share: false,
  182.                         path: "深圳 龙岗",
  183.                         sharenum: 20,
  184.                         commentnum: 30,
  185.                         goodnum: 20
  186.                     };
  187.                     this.guanzhu.list.push(obj);
  188.                     this.guanzhu.loadtext = "上拉加载更多";
  189.                 }, 1000);
  190.                 // this.guanzhu.loadtext="没有更多数据了";
  191.             }
  192.         }
  193.     }
  194. </script>
  196. <style>
  200. </style>

结束