开始

话题的分类页也会用到这个组件
image.png

先来构建data数据
image.png

  1. list:[
  2.                         {
  3.                             titlepic:"../../static/demo/topicpic/13.jpeg",
  4.                             title:"话题名称",
  5.                             desc:"我是话题描述",
  6.                             totalnum:50,
  7.                             todaynum:10
  8.                         },
  9.                         {
  10.                             titlepic:"../../static/demo/topicpic/13.jpeg",
  11.                             title:"话题名称",
  12.                             desc:"我是话题描述",
  13.                             totalnum:50,
  14.                             todaynum:10
  15.                         },
  16.                         {
  17.                             titlepic:"../../static/demo/topicpic/13.jpeg",
  18.                             title:"话题名称",
  19.                             desc:"我是话题描述",
  20.                             totalnum:50,
  21.                             todaynum:10
  22.                         },
  23.                         {
  24.                             titlepic:"../../static/demo/topicpic/13.jpeg",
  25.                             title:"话题名称",
  26.                             desc:"我是话题描述",
  27.                             totalnum:50,
  28.                             todaynum:10
  29.                         },
  30.                         {
  31.                             titlepic:"../../static/demo/topicpic/13.jpeg",
  32.                             title:"话题名称",
  33.                             desc:"我是话题描述",
  34.                             totalnum:50,
  35.                             todaynum:10
  36.                         },
  37.                         {
  38.                             titlepic:"../../static/demo/topicpic/13.jpeg",
  39.                             title:"话题名称",
  40.                             desc:"我是话题描述",
  41.                             totalnum:50,
  42.                             todaynum:10
  43.                         }
  44.                     ]

循环数据
image.png
image.png

  1. <block v-for="(item,index) in topic.list" :key="index">
  2.                                 <view class="topic-list u-f">
  3.                                     <image :src="item.titlepic" mode="widthFix" lazy-load="true">
  4.                                     </image>
  5.                                     <view class="">
  6.                                         <view class="">#{{item.title}}</view>
  7.                                         <view class="">{{item.desc}}</view>
  8.                                         <view class="">动态 {{item.totalnum}} 今日 {{item.todaynum}}</view>
  9.                                     </view>
  10.                                 </view>
  11.                             </block>

在真机上调试发现，上下的间距有点小，
image.png
这里改成20
image.png

  1. .topic-list {
  2.         padding: 20upx 0;
  3.         border-bottom: 1upx solid #EEEEEE;
  4.     }

标题向下的间距就改的小一点。
image.png

  1. .topic-new>view:first-child {
  2.         padding-bottom: 5upx;
  3.         font-size: 32upx;
  4.     }

image.png

给整个页面加上高度就会有滚动条

image.png

  1. <scroll-view scroll-y class="list" :style="{height: swiperheight+'px'}">

未封装组件之前，本节代码

  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" @scrolltolower="loadmore(index)" @scroll="scroll"
  12.                         :scroll-top="srcollTopValue" :style="{height: swiperheight+'px'}">
  13.                         <!-- 列表 -->
  14.                         <block v-for="(item,index) in guanzhu.list" :ket="index">
  15.                             <common-list :item="item" :index="index"></common-list>
  16.                         </block>
  17.                         <!-- 上拉加载 -->
  18.                         <load-more :loadtext="guanzhu.loadtext"></load-more>
  19.                     </scroll-view>
  20.                 </swiper-item>
  21.                 <!-- 话题 -->
  22.                 <swiper-item>
  23.                     <scroll-view scroll-y class="list" :style="{height: swiperheight+'px'}">
  24.                         <!-- 搜索框 -->
  25.                         <view class="search-input">
  26.                             <input class="uni-input" placeholder-class="icon iconfont icon-sousuo topic-search"
  27.                                 placeholder="搜索内容" />
  28.                         </view>
  29.                         <!-- 轮播图 -->
  30.                         <swiper class="topic-swiper" :indicator-dots="true" :autoplay="true" :interval="3000"
  31.                             :duration="1000">
  32.                             <block v-for="(item,index) in topic.swiper" :key="index">
  33.                                 <swiper-item>
  34.                                     <image :src="item.src" mode="widthFix" lazy-load="true"></image>
  35.                                 </swiper-item>
  36.                             </block>
  38.                         </swiper>
  39.                         <!-- 热门分类 -->
  40.                         <topic-nav :nav="topic.nav"></topic-nav>
  41.                         <!-- 最近更新 -->
  42.                         <view class="topic-new">
  43.                             <view class="">最近更新</view>
  45.                             <block v-for="(item,index) in topic.list" :key="index">
  46.                                 <view class="topic-list u-f">
  47.                                     <image :src="item.titlepic" mode="widthFix" lazy-load="true">
  48.                                     </image>
  49.                                     <view class="">
  50.                                         <view class="">#{{item.title}}</view>
  51.                                         <view class="">{{item.desc}}</view>
  52.                                         <view class="">动态 {{item.totalnum}} 今日 {{item.todaynum}}</view>
  53.                                     </view>
  54.                                 </view>
  55.                             </block>
  56.                         </view>
  58.                     </scroll-view>
  59.                 </swiper-item>
  60.             </swiper>
  61.         </view>
  63.     </view>
  64. </template>
  66. <script>
  67.     import commonList from '@/components/common/common-list.vue';
  68.     import newsNavBar from '@/components/news/news-nav-bar.vue';
  69.     import loadMore from '@/components/common/load-more.vue';
  70.     import topicNav from '@/components/news/topic-nav.vue';
  71.     export default {
  72.         components: {
  73.             commonList,
  74.             newsNavBar,
  75.             loadMore,
  76.             topicNav
  77.         },
  78.         data() {
  79.             return {
  80.                 swiperheight: 500,
  81.                 srcollTopValue: 0, // 默认是0
  82.                 tabIndex: 1,
  83.                 tabBars: [{
  84.                         name: '关注',
  85.                         id: 'guanzhu'
  86.                     },
  87.                     {
  88.                         name: '话题',
  89.                         id: 'toppic'
  90.                     },
  91.                 ],
  92.                 guanzhu: {
  93.                     loadtext: "上拉加载更多",
  94.                     list: [
  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: "",
  104.                             video: false,
  105.                             share: false,
  106.                             path: "深圳 龙岗",
  107.                             sharenum: 20,
  108.                             commentnum: 30,
  109.                             goodnum: 20
  110.                         },
  111.                         // 图文
  112.                         {
  113.                             userpic: "../../static/demo/userpic/12.jpg",
  114.                             username: "哈哈",
  115.                             sex: 0, //0 男 1 女
  116.                             age: 25,
  117.                             isguanzhu: false,
  118.                             title: "我是标题",
  119.                             titlepic: "../../static/demo/datapic/13.jpg",
  120.                             video: false,
  121.                             share: false,
  122.                             path: "深圳 龙岗",
  123.                             sharenum: 20,
  124.                             commentnum: 30,
  125.                             goodnum: 20
  126.                         },
  127.                         // 视频
  128.                         {
  129.                             userpic: "../../static/demo/userpic/12.jpg",
  130.                             username: "哈哈",
  131.                             sex: 0, //0 男 1 女
  132.                             age: 25,
  133.                             isguanzhu: false,
  134.                             title: "我是标题",
  135.                             titlepic: "../../static/demo/datapic/13.jpg",
  136.                             video: {
  137.                                 looknum: "20w",
  138.                                 long: "2:47"
  139.                             },
  140.                             share: false,
  141.                             path: "深圳 龙岗",
  142.                             sharenum: 20,
  143.                             commentnum: 30,
  144.                             goodnum: 20
  145.                         },
  146.                         // 分享
  147.                         {
  148.                             userpic: "../../static/demo/userpic/12.jpg",
  149.                             username: "哈哈",
  150.                             sex: 0, //0 男 1 女
  151.                             age: 25,
  152.                             isguanzhu: false,
  153.                             title: "我是标题",
  154.                             titlepic: "",
  155.                             video: false,
  156.                             share: {
  157.                                 title: "我是分享的标题",
  158.                                 titlepic: "../../static/demo/datapic/14.jpg"
  159.                             },
  160.                             path: "深圳 龙岗",
  161.                             sharenum: 20,
  162.                             commentnum: 30,
  163.                             goodnum: 20
  164.                         },
  165.                     ]
  166.                 },
  167.                 topic: {
  168.                     swiper: [{
  169.                             src: "../../static/demo/banner1.jpg"
  170.                         },
  171.                         {
  172.                             src: "../../static/demo/banner2.jpg"
  173.                         },
  174.                         {
  175.                             src: "../../static/demo/banner3.jpg"
  176.                         },
  177.                     ],
  178.                     nav: [{
  179.                             name: "最新"
  180.                         },
  181.                         {
  182.                             name: "游戏"
  183.                         },
  184.                         {
  185.                             name: "打卡"
  186.                         },
  187.                         {
  188.                             name: "情感"
  189.                         },
  190.                         {
  191.                             name: "故事"
  192.                         },
  193.                         {
  194.                             name: "喜爱"
  195.                         },
  196.                     ],
  197.                     list: [{
  198.                             titlepic: "../../static/demo/topicpic/13.jpeg",
  199.                             title: "话题名称",
  200.                             desc: "我是话题描述",
  201.                             totalnum: 50,
  202.                             todaynum: 10
  203.                         },
  204.                         {
  205.                             titlepic: "../../static/demo/topicpic/13.jpeg",
  206.                             title: "话题名称",
  207.                             desc: "我是话题描述",
  208.                             totalnum: 50,
  209.                             todaynum: 10
  210.                         },
  211.                         {
  212.                             titlepic: "../../static/demo/topicpic/13.jpeg",
  213.                             title: "话题名称",
  214.                             desc: "我是话题描述",
  215.                             totalnum: 50,
  216.                             todaynum: 10
  217.                         },
  218.                         {
  219.                             titlepic: "../../static/demo/topicpic/13.jpeg",
  220.                             title: "话题名称",
  221.                             desc: "我是话题描述",
  222.                             totalnum: 50,
  223.                             todaynum: 10
  224.                         },
  225.                         {
  226.                             titlepic: "../../static/demo/topicpic/13.jpeg",
  227.                             title: "话题名称",
  228.                             desc: "我是话题描述",
  229.                             totalnum: 50,
  230.                             todaynum: 10
  231.                         },
  232.                         {
  233.                             titlepic: "../../static/demo/topicpic/13.jpeg",
  234.                             title: "话题名称",
  235.                             desc: "我是话题描述",
  236.                             totalnum: 50,
  237.                             todaynum: 10
  238.                         }
  239.                     ]
  240.                 }
  241.             }
  242.         },
  243.         onLoad() {
  244.             uni.getSystemInfo({
  245.                 success: (res) => {
  246.                     console.log('当前window高度和窗口高度');
  247.                     console.log(res.windowHeight);
  248.                     console.log(res.screenHeight);
  249.                     let height = res.windowHeight - uni.upx2px(100)
  250.                     this.swiperheight = height;
  251.                 }
  252.             });
  253.         },
  254.         methods: {
  255.             scroll(e) {
  256.                 // console.log('scroll事件',e);
  257.                 this.scrollTopValue = e.detail.scrollTop;
  258.             },
  259.             // 点击切换
  260.             changeTab(index) {
  261.                 console.log('父页面点击:', index);
  262.                 this.tabIndex = index;
  263.             },
  264.             // 滑动事件
  265.             tabChange(e) {
  266.                 this.tabIndex = e.details.current
  267.             },
  268.             // 上拉加载
  269.             loadmore() {
  270.                 if (this.guanzhu.loadtext != "上拉加载更多") {
  271.                     return;
  272.                 }
  273.                 // 修改状态
  274.                 this.guanzhu.loadtext = "加载中...";
  275.                 // 获取数据
  276.                 setTimeout(() => {
  277.                     //获取完成
  278.                     let obj = {
  279.                         userpic: "../../static/demo/userpic/12.jpg",
  280.                         username: "哈哈",
  281.                         sex: 0, //0 男 1 女
  282.                         age: 25,
  283.                         isguanzhu: false,
  284.                         title: "我是标题",
  285.                         titlepic: "../../static/demo/datapic/13.jpg",
  286.                         video: false,
  287.                         share: false,
  288.                         path: "深圳 龙岗",
  289.                         sharenum: 20,
  290.                         commentnum: 30,
  291.                         goodnum: 20
  292.                     };
  293.                     this.guanzhu.list.push(obj);
  294.                     this.guanzhu.loadtext = "上拉加载更多";
  295.                 }, 1000);
  296.                 // this.guanzhu.loadtext="没有更多数据了";
  297.             }
  298.         }
  299.     }
  300. </script>
  302. <style>
  303.     .search-input {
  304.         /* border: 1upx solid; */
  305.         padding: 20upx;
  306.     }
  308.     .search-input>input {
  309.         /* border: 1upx solid; */
  310.         background: #F4F4F4;
  311.         border-radius: 10upx;
  312.     }
  314.     .topic-search {
  315.         display: flex;
  316.         justify-content: center;
  317.         font-size: 27upx;
  318.     }
  320.     .topic-swiper {
  321.         padding: 0 20upx 20upx 20upx;
  322.     }
  324.     .topic-swiper image {
  325.         width: 100%;
  326.         border-radius: 10upx;
  327.     }
  329.     .topic-new {
  330.         padding: 20upx;
  331.     }
  333.     .topic-new>view:first-child {
  334.         padding-bottom: 5upx;
  335.         font-size: 32upx;
  336.     }
  338.     .topic-list {
  339.         padding: 20upx 0;
  340.         border-bottom: 1upx solid #EEEEEE;
  341.     }
  343.     .topic-list>view>view {
  344.         color: #A4A4A4;
  345.     }
  347.     .topic-list>view>view:first-child {
  348.         color: #333333;
  349.         font-size: 32upx;
  350.     }
  352.     .topic-list image {
  353.         width: 150upx;
  354.         height: 150upx;
  355.         border-radius: 10upx;
  356.         margin-right: 20upx;
  357.     }
  358. </style>

封装成组件

image.png

image.png
剪切到组件
image.png

image.png

css剪切过去，只剪切，.topic-list和它后面的css就可以了。

  1. .topic-list {
  2.         padding: 20upx 0;
  3.         border-bottom: 1upx solid #EEEEEE;
  4.     }
  6.     .topic-list>view>view {
  7.         color: #A4A4A4;
  8.     }
  10.     .topic-list>view>view:first-child {
  11.         color: #333333;
  12.         font-size: 32upx;
  13.     }
  15.     .topic-list image {
  16.         width: 150upx;
  17.         height: 150upx;
  18.         border-radius: 10upx;
  19.         margin-right: 20upx;
  20.     }

image.png

image.png

  1. <script>
  2.     export default{
  3.         props:{
  4.             item:Object,
  5.             index:Number
  6.         }
  7.     }
  8. </script>

引入组件-注册组件-使用

image.png

  1. import topicList from '@/components/news/topic-list.vue';
  3. topicList

image.png

  1. <topic-list :item="item" :index="index"></topic-list>

image.png

默认重新定位到关注列表
image.png

增加动画效果

从左边淡入

  1. animated fadeInLeft fast

image.png

image.png

本节代码

topic-list组件

  1. <template>
  2.     <view class="topic-list u-f animated fadeInLeft fast">
  3.         <image :src="item.titlepic" mode="widthFix" lazy-load="true">
  4.         </image>
  5.         <view class="">
  6.             <view class="">#{{item.title}}</view>
  7.             <view class="">{{item.desc}}</view>
  8.             <view class="">动态 {{item.totalnum}} 今日 {{item.todaynum}}</view>
  9.         </view>
  10.     </view>
  11. </template>
  13. <script>
  14.     export default{
  15.         props:{
  16.             item:Object,
  17.             index:Number
  18.         }
  19.     }
  20. </script>
  22. <style scoped>
  23.     .topic-list {
  24.         padding: 20upx 0;
  25.         border-bottom: 1upx solid #EEEEEE;
  26.     }
  28.     .topic-list>view>view {
  29.         color: #A4A4A4;
  30.     }
  32.     .topic-list>view>view:first-child {
  33.         color: #333333;
  34.         font-size: 32upx;
  35.     }
  37.     .topic-list image {
  38.         width: 150upx;
  39.         height: 150upx;
  40.         border-radius: 10upx;
  41.         margin-right: 20upx;
  42.     }
  43. </style>

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" @scrolltolower="loadmore(index)" @scroll="scroll"
  12.                         :scroll-top="srcollTopValue" :style="{height: swiperheight+'px'}">
  13.                         <!-- 列表 -->
  14.                         <block v-for="(item,index) in guanzhu.list" :ket="index">
  15.                             <common-list :item="item" :index="index"></common-list>
  16.                         </block>
  17.                         <!-- 上拉加载 -->
  18.                         <load-more :loadtext="guanzhu.loadtext"></load-more>
  19.                     </scroll-view>
  20.                 </swiper-item>
  21.                 <!-- 话题 -->
  22.                 <swiper-item>
  23.                     <scroll-view scroll-y class="list" :style="{height: swiperheight+'px'}">
  24.                         <!-- 搜索框 -->
  25.                         <view class="search-input">
  26.                             <input class="uni-input" placeholder-class="icon iconfont icon-sousuo topic-search"
  27.                                 placeholder="搜索内容" />
  28.                         </view>
  29.                         <!-- 轮播图 -->
  30.                         <swiper class="topic-swiper" :indicator-dots="true" :autoplay="true" :interval="3000"
  31.                             :duration="1000">
  32.                             <block v-for="(item,index) in topic.swiper" :key="index">
  33.                                 <swiper-item>
  34.                                     <image :src="item.src" mode="widthFix" lazy-load="true"></image>
  35.                                 </swiper-item>
  36.                             </block>
  38.                         </swiper>
  39.                         <!-- 热门分类 -->
  40.                         <topic-nav :nav="topic.nav"></topic-nav>
  41.                         <!-- 最近更新 -->
  42.                         <view class="topic-new">
  43.                             <view class="">最近更新</view>
  45.                             <block v-for="(item,index) in topic.list" :key="index">
  46.                                 <topic-list :item="item" :index="index"></topic-list>
  47.                             </block>
  48.                         </view>
  50.                     </scroll-view>
  51.                 </swiper-item>
  52.             </swiper>
  53.         </view>
  55.     </view>
  56. </template>
  58. <script>
  59.     import commonList from '@/components/common/common-list.vue';
  60.     import newsNavBar from '@/components/news/news-nav-bar.vue';
  61.     import loadMore from '@/components/common/load-more.vue';
  62.     import topicNav from '@/components/news/topic-nav.vue';
  63.     import topicList from '@/components/news/topic-list.vue';
  64.     export default {
  65.         components: {
  66.             commonList,
  67.             newsNavBar,
  68.             loadMore,
  69.             topicNav,
  70.             topicList
  71.         },
  72.         data() {
  73.             return {
  74.                 swiperheight: 500,
  75.                 srcollTopValue: 0, // 默认是0
  76.                 tabIndex: 0,
  77.                 tabBars: [{
  78.                         name: '关注',
  79.                         id: 'guanzhu'
  80.                     },
  81.                     {
  82.                         name: '话题',
  83.                         id: 'toppic'
  84.                     },
  85.                 ],
  86.                 guanzhu: {
  87.                     loadtext: "上拉加载更多",
  88.                     list: [
  89.                         // 文字
  90.                         {
  91.                             userpic: "../../static/demo/userpic/12.jpg",
  92.                             username: "哈哈",
  93.                             sex: 0, //0 男 1 女
  94.                             age: 25,
  95.                             isguanzhu: false,
  96.                             title: "我是标题",
  97.                             titlepic: "",
  98.                             video: false,
  99.                             share: false,
  100.                             path: "深圳 龙岗",
  101.                             sharenum: 20,
  102.                             commentnum: 30,
  103.                             goodnum: 20
  104.                         },
  105.                         // 图文
  106.                         {
  107.                             userpic: "../../static/demo/userpic/12.jpg",
  108.                             username: "哈哈",
  109.                             sex: 0, //0 男 1 女
  110.                             age: 25,
  111.                             isguanzhu: false,
  112.                             title: "我是标题",
  113.                             titlepic: "../../static/demo/datapic/13.jpg",
  114.                             video: false,
  115.                             share: false,
  116.                             path: "深圳 龙岗",
  117.                             sharenum: 20,
  118.                             commentnum: 30,
  119.                             goodnum: 20
  120.                         },
  121.                         // 视频
  122.                         {
  123.                             userpic: "../../static/demo/userpic/12.jpg",
  124.                             username: "哈哈",
  125.                             sex: 0, //0 男 1 女
  126.                             age: 25,
  127.                             isguanzhu: false,
  128.                             title: "我是标题",
  129.                             titlepic: "../../static/demo/datapic/13.jpg",
  130.                             video: {
  131.                                 looknum: "20w",
  132.                                 long: "2:47"
  133.                             },
  134.                             share: false,
  135.                             path: "深圳 龙岗",
  136.                             sharenum: 20,
  137.                             commentnum: 30,
  138.                             goodnum: 20
  139.                         },
  140.                         // 分享
  141.                         {
  142.                             userpic: "../../static/demo/userpic/12.jpg",
  143.                             username: "哈哈",
  144.                             sex: 0, //0 男 1 女
  145.                             age: 25,
  146.                             isguanzhu: false,
  147.                             title: "我是标题",
  148.                             titlepic: "",
  149.                             video: false,
  150.                             share: {
  151.                                 title: "我是分享的标题",
  152.                                 titlepic: "../../static/demo/datapic/14.jpg"
  153.                             },
  154.                             path: "深圳 龙岗",
  155.                             sharenum: 20,
  156.                             commentnum: 30,
  157.                             goodnum: 20
  158.                         },
  159.                     ]
  160.                 },
  161.                 topic: {
  162.                     swiper: [{
  163.                             src: "../../static/demo/banner1.jpg"
  164.                         },
  165.                         {
  166.                             src: "../../static/demo/banner2.jpg"
  167.                         },
  168.                         {
  169.                             src: "../../static/demo/banner3.jpg"
  170.                         },
  171.                     ],
  172.                     nav: [{
  173.                             name: "最新"
  174.                         },
  175.                         {
  176.                             name: "游戏"
  177.                         },
  178.                         {
  179.                             name: "打卡"
  180.                         },
  181.                         {
  182.                             name: "情感"
  183.                         },
  184.                         {
  185.                             name: "故事"
  186.                         },
  187.                         {
  188.                             name: "喜爱"
  189.                         },
  190.                     ],
  191.                     list: [{
  192.                             titlepic: "../../static/demo/topicpic/13.jpeg",
  193.                             title: "话题名称",
  194.                             desc: "我是话题描述",
  195.                             totalnum: 50,
  196.                             todaynum: 10
  197.                         },
  198.                         {
  199.                             titlepic: "../../static/demo/topicpic/13.jpeg",
  200.                             title: "话题名称",
  201.                             desc: "我是话题描述",
  202.                             totalnum: 50,
  203.                             todaynum: 10
  204.                         },
  205.                         {
  206.                             titlepic: "../../static/demo/topicpic/13.jpeg",
  207.                             title: "话题名称",
  208.                             desc: "我是话题描述",
  209.                             totalnum: 50,
  210.                             todaynum: 10
  211.                         },
  212.                         {
  213.                             titlepic: "../../static/demo/topicpic/13.jpeg",
  214.                             title: "话题名称",
  215.                             desc: "我是话题描述",
  216.                             totalnum: 50,
  217.                             todaynum: 10
  218.                         },
  219.                         {
  220.                             titlepic: "../../static/demo/topicpic/13.jpeg",
  221.                             title: "话题名称",
  222.                             desc: "我是话题描述",
  223.                             totalnum: 50,
  224.                             todaynum: 10
  225.                         },
  226.                         {
  227.                             titlepic: "../../static/demo/topicpic/13.jpeg",
  228.                             title: "话题名称",
  229.                             desc: "我是话题描述",
  230.                             totalnum: 50,
  231.                             todaynum: 10
  232.                         }
  233.                     ]
  234.                 }
  235.             }
  236.         },
  237.         onLoad() {
  238.             uni.getSystemInfo({
  239.                 success: (res) => {
  240.                     console.log('当前window高度和窗口高度');
  241.                     console.log(res.windowHeight);
  242.                     console.log(res.screenHeight);
  243.                     let height = res.windowHeight - uni.upx2px(100)
  244.                     this.swiperheight = height;
  245.                 }
  246.             });
  247.         },
  248.         methods: {
  249.             scroll(e) {
  250.                 // console.log('scroll事件',e);
  251.                 this.scrollTopValue = e.detail.scrollTop;
  252.             },
  253.             // 点击切换
  254.             changeTab(index) {
  255.                 console.log('父页面点击:', index);
  256.                 this.tabIndex = index;
  257.             },
  258.             // 滑动事件
  259.             tabChange(e) {
  260.                 this.tabIndex = e.details.current
  261.             },
  262.             // 上拉加载
  263.             loadmore() {
  264.                 if (this.guanzhu.loadtext != "上拉加载更多") {
  265.                     return;
  266.                 }
  267.                 // 修改状态
  268.                 this.guanzhu.loadtext = "加载中...";
  269.                 // 获取数据
  270.                 setTimeout(() => {
  271.                     //获取完成
  272.                     let obj = {
  273.                         userpic: "../../static/demo/userpic/12.jpg",
  274.                         username: "哈哈",
  275.                         sex: 0, //0 男 1 女
  276.                         age: 25,
  277.                         isguanzhu: false,
  278.                         title: "我是标题",
  279.                         titlepic: "../../static/demo/datapic/13.jpg",
  280.                         video: false,
  281.                         share: false,
  282.                         path: "深圳 龙岗",
  283.                         sharenum: 20,
  284.                         commentnum: 30,
  285.                         goodnum: 20
  286.                     };
  287.                     this.guanzhu.list.push(obj);
  288.                     this.guanzhu.loadtext = "上拉加载更多";
  289.                 }, 1000);
  290.                 // this.guanzhu.loadtext="没有更多数据了";
  291.             }
  292.         }
  293.     }
  294. </script>
  296. <style>
  297.     .search-input {
  298.         /* border: 1upx solid; */
  299.         padding: 20upx;
  300.     }
  302.     .search-input>input {
  303.         /* border: 1upx solid; */
  304.         background: #F4F4F4;
  305.         border-radius: 10upx;
  306.     }
  308.     .topic-search {
  309.         display: flex;
  310.         justify-content: center;
  311.         font-size: 27upx;
  312.     }
  314.     .topic-swiper {
  315.         padding: 0 20upx 20upx 20upx;
  316.     }
  318.     .topic-swiper image {
  319.         width: 100%;
  320.         border-radius: 10upx;
  321.     }
  323.     .topic-new {
  324.         padding: 20upx;
  325.     }
  327.     .topic-new>view:first-child {
  328.         padding-bottom: 5upx;
  329.         font-size: 32upx;
  330.     }
  333. </style>

结束