开始

实现tab切换
image.png
参考这里 topic-detail.vue页面。
image.png

把tablist数据也复制过来
image.png

  1. tablist: [{
  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.                     {
  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.                 ]

我们有3个tab。第一个tab默认显示userinfo
image.png
内容就是我们之前封装的common-list是差不多的。
image.png

image.png

  1. import commonList from '@/components/@/components/common/common-list.vue';
  4. commonList

上拉加载组件。
image.png

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

image.png

移植上拉加载

image.png

  1. // 上拉触底事件
  2.         onReachBottom() {
  3.             this.loadmore();
  4.         },

还要复制loadmore。复制过来基本不需要修改。
image.png

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

image.png

image.png

本节代码

  1. <template>
  2.     <view>
  3.         <!-- 背景图 + 用户基本信息 -->
  4.         <user-space-head :userinfo="userinfo"></user-space-head>
  5.         <!-- 统计 -->
  6.         <view class="user-space-data">
  7.             <home-data :homedata="spacedata"></home-data>
  8.         </view>
  9.         <view class="height:20upx;background:F4F4F4;"></view>
  11.         <!-- tabbar切换 -->
  12.         <swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap" scrollStyle="border-bottom:0;"
  13.             scrollItemStyle="width:33%;">
  14.         </swiper-tab-head>
  18.         <block v-for="(item,index) in tablist" :key="index">
  19.             <template v-if="tabIndex==0">
  20.                 <!-- 主页 -->
  21.                 <user-space-userinfo :userinfo="userinfo"></user-space-userinfo>
  22.             </template>
  23.             <template v-else-if="tabIndex==index">
  24.                 <block v-for="(list,listindex) in item.list" :key="listindex">
  25.                     <common-list :item="list" :index="listindex"></common-list>
  26.                 </block>
  27.                 <!-- 上拉加载 -->
  28.                 <load-more :loadtext="item.loadtext"></load-more>
  29.             </template>
  30.         </block>
  33.     </view>
  34. </template>
  36. <script>
  37.     import userSpaceHead from '@/components/user-space/user-space-head.vue';
  38.     import swiperTabHead from '@/components/index/swiper-tab-head.vue';
  39.     import homeData from '@/components/home/home-data.vue';
  40.     import userSpaceUserinfo from '@/components/user-space/user-space-userinfo.vue';
  41.     import commonList from '@/components/common/common-list.vue';
  42.     import loadMore from '@/components/common/load-more.vue';
  43.     export default {
  44.         components: {
  45.             userSpaceHead,
  46.             homeData,
  47.             swiperTabHead,
  48.             userSpaceUserinfo,
  49.             commonList,
  50.             loadMore
  51.         },
  52.         data() {
  53.             return {
  54.                 tabIndex: 0,
  55.                 tabBars: [{
  56.                         name: "主页",
  57.                         id: "zhuye"
  58.                     },
  59.                     {
  60.                         name: "糗事",
  61.                         id: "qiushi"
  62.                     }, {
  63.                         name: "动态",
  64.                         id: "dongtai"
  65.                     },
  66.                 ],
  67.                 userinfo: {
  68.                     bgimg: 1,
  69.                     userpic: '../../static/demo/userpic/11.jpg',
  70.                     username: '昵称',
  71.                     sex: 0,
  72.                     age: 20,
  73.                     isguanzhu: false,
  74.                     regtime: '2019-04-11',
  75.                     id: 1213,
  76.                     birthday: '1987-02-07',
  77.                     job: 'IT',
  78.                     path: '广东广州',
  79.                     qg: '已婚'
  80.                 },
  81.                 spacedata: [{
  82.                         name: "获赞",
  83.                         num: '10k'
  84.                     },
  85.                     {
  86.                         name: "关注",
  87.                         num: 0
  88.                     },
  89.                     {
  90.                         name: "粉丝",
  91.                         num: 0
  92.                     }
  93.                 ],
  94.                 tablist: [{
  95.                         loadtext: "上拉加载更多",
  96.                         list: [
  97.                             // 文字
  98.                             {
  99.                                 userpic: "../../static/demo/userpic/12.jpg",
  100.                                 username: "哈哈",
  101.                                 sex: 0, //0 男 1 女
  102.                                 age: 25,
  103.                                 isguanzhu: false,
  104.                                 title: "我是标题",
  105.                                 titlepic: "",
  106.                                 video: false,
  107.                                 share: false,
  108.                                 path: "深圳 龙岗",
  109.                                 sharenum: 20,
  110.                                 commentnum: 30,
  111.                                 goodnum: 20
  112.                             },
  113.                             // 图文
  114.                             {
  115.                                 userpic: "../../static/demo/userpic/12.jpg",
  116.                                 username: "哈哈",
  117.                                 sex: 0, //0 男 1 女
  118.                                 age: 25,
  119.                                 isguanzhu: false,
  120.                                 title: "我是标题",
  121.                                 titlepic: "../../static/demo/datapic/13.jpg",
  122.                                 video: false,
  123.                                 share: false,
  124.                                 path: "深圳 龙岗",
  125.                                 sharenum: 20,
  126.                                 commentnum: 30,
  127.                                 goodnum: 20
  128.                             },
  129.                             // 视频
  130.                             {
  131.                                 userpic: "../../static/demo/userpic/12.jpg",
  132.                                 username: "哈哈",
  133.                                 sex: 0, //0 男 1 女
  134.                                 age: 25,
  135.                                 isguanzhu: false,
  136.                                 title: "我是标题",
  137.                                 titlepic: "../../static/demo/datapic/13.jpg",
  138.                                 video: {
  139.                                     looknum: "20w",
  140.                                     long: "2:47"
  141.                                 },
  142.                                 share: false,
  143.                                 path: "深圳 龙岗",
  144.                                 sharenum: 20,
  145.                                 commentnum: 30,
  146.                                 goodnum: 20
  147.                             },
  148.                         ]
  149.                     },
  150.                     {
  151.                         loadtext: "上拉加载更多",
  152.                         list: [
  153.                             // 文字
  154.                             {
  155.                                 userpic: "../../static/demo/userpic/12.jpg",
  156.                                 username: "哈哈",
  157.                                 sex: 0, //0 男 1 女
  158.                                 age: 25,
  159.                                 isguanzhu: false,
  160.                                 title: "我是标题",
  161.                                 titlepic: "",
  162.                                 video: false,
  163.                                 share: false,
  164.                                 path: "深圳 龙岗",
  165.                                 sharenum: 20,
  166.                                 commentnum: 30,
  167.                                 goodnum: 20
  168.                             },
  169.                             // 图文
  170.                             {
  171.                                 userpic: "../../static/demo/userpic/12.jpg",
  172.                                 username: "哈哈",
  173.                                 sex: 0, //0 男 1 女
  174.                                 age: 25,
  175.                                 isguanzhu: false,
  176.                                 title: "我是标题",
  177.                                 titlepic: "../../static/demo/datapic/13.jpg",
  178.                                 video: false,
  179.                                 share: false,
  180.                                 path: "深圳 龙岗",
  181.                                 sharenum: 20,
  182.                                 commentnum: 30,
  183.                                 goodnum: 20
  184.                             },
  185.                             // 视频
  186.                             {
  187.                                 userpic: "../../static/demo/userpic/12.jpg",
  188.                                 username: "哈哈",
  189.                                 sex: 0, //0 男 1 女
  190.                                 age: 25,
  191.                                 isguanzhu: false,
  192.                                 title: "我是标题",
  193.                                 titlepic: "../../static/demo/datapic/13.jpg",
  194.                                 video: {
  195.                                     looknum: "20w",
  196.                                     long: "2:47"
  197.                                 },
  198.                                 share: false,
  199.                                 path: "深圳 龙岗",
  200.                                 sharenum: 20,
  201.                                 commentnum: 30,
  202.                                 goodnum: 20
  203.                             },
  204.                         ]
  205.                     },
  206.                 ]
  207.             }
  208.         },
  209.         computed: {
  211.         },
  212.         // 上拉触底事件
  213.         onReachBottom() {
  214.             this.loadmore();
  215.         },
  216.         methods: {
  217.             // tabbar点击事件
  218.             tabtap(index) {
  219.                 // console.log(index);
  220.                 this.tabIndex = index;
  221.             },
  222.             loadmore() {
  223.                 if (this.tablist[this.tabIndex].loadtext != "上拉加载更多") {
  224.                     return;
  225.                 }
  226.                 // 修改状态
  227.                 this.tablist[this.tabIndex].loadtext = "加载中...";
  228.                 // 获取数据
  229.                 setTimeout(() => {
  230.                     //获取完成
  231.                     let obj = {
  232.                         userpic: "../../static/demo/userpic/12.jpg",
  233.                         username: "哈哈",
  234.                         sex: 0, //0 男 1 女
  235.                         age: 25,
  236.                         isguanzhu: false,
  237.                         title: "我是标题",
  238.                         titlepic: "../../static/demo/datapic/13.jpg",
  239.                         video: false,
  240.                         share: false,
  241.                         path: "深圳 龙岗",
  242.                         sharenum: 20,
  243.                         commentnum: 30,
  244.                         goodnum: 20
  245.                     };
  246.                     this.tablist[this.tabIndex].list.push(obj);
  247.                     this.tablist[this.tabIndex].loadtext = "上拉加载更多";
  248.                 }, 1000);
  249.             }
  250.         }
  251.     }
  252. </script>
  254. <style>
  255.     .user-spaace-margin {
  256.         margin: 15upx 0;
  257.     }
  260. </style>

结束