开始

热门分类封装组件
image.png
topic-nav.vue
image.png

剪切之前先构造动态的数据

image.png

  1. nav:[
  2.                         {name:"最新"},
  3.                         {name:"游戏"},
  4.                         {name:"打卡"},
  5.                         {name:"情感"},
  6.                         {name:"故事"},
  7.                         {name:"喜爱"},
  8.                     ]

改成v-for循环。
image.png

  1. <view class="u-f-ajc">
  2.                                 <block v-for="(item,index) in topic.nav" :key="index">
  3.                                     <view class="u-f-ajc">{{item.name}}</view>
  4.                                 </block>
  5.                             </view>

剪切代码到组件

image.png
image.png
这里往下的所有css复制进去
image.png

image.png

image.png

  2. <style scoped>
  4.     .topic-nav {
  5.         border-bottom: 1upx solid #EEEEEE;
  6.         border-top: 1upx solid #EEEEEE;
  7.         padding: 20upx;
  8.     }
  10.     .topic-nav>view:first-child {
  11.         margin-bottom: 10upx;
  12.     }
  14.     .topic-nav>view:first-child view {
  15.         color: #9E9E9E;
  16.     }
  18.     .topic-nav>view:first-child>view:first-child {
  19.         color: #333333;
  20.         font-size: 32upx;
  21.     }
  23.     .topic-nav>view:last-child>view {
  24.         flex: 1;
  25.         background: #dddddd;
  26.         color: #9E9E9E;
  27.         border-radius: 10upx;
  28.         margin: 0 10upx;
  29.     }
  30. </style>

js代码

image.png

  1. <block v-for="(item,index) in nav" :key="index">
  2.                 <view class="u-f-ajc">{{item.name}}</view>
  3.             </block>

image.png

  1. <script>
  2.     export default {
  3.         props: {
  4.             nav: Array
  5.         }
  6.     }
  7. </script>

引入组件
image.png

  1. import topicNav from '@/components/news/topic-nav.vue';
  3. topicNav

image.png

  1. <!-- 热门分类 -->
  2.                         <topic-nav :nav="topic.nav"></topic-nav>

测试

image.png

本节代码

topic-nav.vue组件

  1. <template>
  2.     <view class="topic-nav">
  3.         <view class="u-f-ajc u-f-jsb">
  4.             <view class="">热门分类</view>
  5.             <view class="u-f-ajc">
  6.                 更多<view class="icon iconfont icon-jinru"></view>
  7.             </view>
  8.         </view>
  9.         <view class="u-f-ajc">
  10.             <block v-for="(item,index) in nav" :key="index">
  11.                 <view class="u-f-ajc">{{item.name}}</view>
  12.             </block>
  13.         </view>
  14.     </view>
  15. </template>
  17. <script>
  18.     export default {
  19.         props: {
  20.             nav: Array
  21.         }
  22.     }
  23. </script>
  25. <style scoped>
  27.     .topic-nav {
  28.         border-bottom: 1upx solid #EEEEEE;
  29.         border-top: 1upx solid #EEEEEE;
  30.         padding: 20upx;
  31.     }
  33.     .topic-nav>view:first-child {
  34.         margin-bottom: 10upx;
  35.     }
  37.     .topic-nav>view:first-child view {
  38.         color: #9E9E9E;
  39.     }
  41.     .topic-nav>view:first-child>view:first-child {
  42.         color: #333333;
  43.         font-size: 32upx;
  44.     }
  46.     .topic-nav>view:last-child>view {
  47.         flex: 1;
  48.         background: #dddddd;
  49.         color: #9E9E9E;
  50.         border-radius: 10upx;
  51.         margin: 0 10upx;
  52.     }
  53. </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">
  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.                         <!-- 最近更新 -->
  44.                     </scroll-view>
  45.                 </swiper-item>
  46.             </swiper>
  47.         </view>
  49.     </view>
  50. </template>
  52. <script>
  53.     import commonList from '@/components/common/common-list.vue';
  54.     import newsNavBar from '@/components/news/news-nav-bar.vue';
  55.     import loadMore from '@/components/common/load-more.vue';
  56.     import topicNav from '@/components/news/topic-nav.vue';
  57.     export default {
  58.         components: {
  59.             commonList,
  60.             newsNavBar,
  61.             loadMore,
  62.             topicNav
  63.         },
  64.         data() {
  65.             return {
  66.                 swiperheight: 500,
  67.                 srcollTopValue: 0, // 默认是0
  68.                 tabIndex: 1,
  69.                 tabBars: [{
  70.                         name: '关注',
  71.                         id: 'guanzhu'
  72.                     },
  73.                     {
  74.                         name: '话题',
  75.                         id: 'toppic'
  76.                     },
  77.                 ],
  78.                 guanzhu: {
  79.                     loadtext: "上拉加载更多",
  80.                     list: [
  81.                         // 文字
  82.                         {
  83.                             userpic: "../../static/demo/userpic/12.jpg",
  84.                             username: "哈哈",
  85.                             sex: 0, //0 男 1 女
  86.                             age: 25,
  87.                             isguanzhu: false,
  88.                             title: "我是标题",
  89.                             titlepic: "",
  90.                             video: false,
  91.                             share: false,
  92.                             path: "深圳 龙岗",
  93.                             sharenum: 20,
  94.                             commentnum: 30,
  95.                             goodnum: 20
  96.                         },
  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: "../../static/demo/datapic/13.jpg",
  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: {
  123.                                 looknum: "20w",
  124.                                 long: "2:47"
  125.                             },
  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: "",
  141.                             video: false,
  142.                             share: {
  143.                                 title: "我是分享的标题",
  144.                                 titlepic: "../../static/demo/datapic/14.jpg"
  145.                             },
  146.                             path: "深圳 龙岗",
  147.                             sharenum: 20,
  148.                             commentnum: 30,
  149.                             goodnum: 20
  150.                         },
  151.                     ]
  152.                 },
  153.                 topic: {
  154.                     swiper: [{
  155.                             src: "../../static/demo/banner1.jpg"
  156.                         },
  157.                         {
  158.                             src: "../../static/demo/banner2.jpg"
  159.                         },
  160.                         {
  161.                             src: "../../static/demo/banner3.jpg"
  162.                         },
  163.                     ],
  164.                     nav: [{
  165.                             name: "最新"
  166.                         },
  167.                         {
  168.                             name: "游戏"
  169.                         },
  170.                         {
  171.                             name: "打卡"
  172.                         },
  173.                         {
  174.                             name: "情感"
  175.                         },
  176.                         {
  177.                             name: "故事"
  178.                         },
  179.                         {
  180.                             name: "喜爱"
  181.                         },
  182.                     ]
  183.                 }
  184.             }
  185.         },
  186.         onLoad() {
  187.             uni.getSystemInfo({
  188.                 success: (res) => {
  189.                     console.log('当前window高度和窗口高度');
  190.                     console.log(res.windowHeight);
  191.                     console.log(res.screenHeight);
  192.                     let height = res.windowHeight - uni.upx2px(100)
  193.                     this.swiperheight = height;
  194.                 }
  195.             });
  196.         },
  197.         methods: {
  198.             scroll(e) {
  199.                 // console.log('scroll事件',e);
  200.                 this.scrollTopValue = e.detail.scrollTop;
  201.             },
  202.             // 点击切换
  203.             changeTab(index) {
  204.                 console.log('父页面点击:', index);
  205.                 this.tabIndex = index;
  206.             },
  207.             // 滑动事件
  208.             tabChange(e) {
  209.                 this.tabIndex = e.details.current
  210.             },
  211.             // 上拉加载
  212.             loadmore() {
  213.                 if (this.guanzhu.loadtext != "上拉加载更多") {
  214.                     return;
  215.                 }
  216.                 // 修改状态
  217.                 this.guanzhu.loadtext = "加载中...";
  218.                 // 获取数据
  219.                 setTimeout(() => {
  220.                     //获取完成
  221.                     let obj = {
  222.                         userpic: "../../static/demo/userpic/12.jpg",
  223.                         username: "哈哈",
  224.                         sex: 0, //0 男 1 女
  225.                         age: 25,
  226.                         isguanzhu: false,
  227.                         title: "我是标题",
  228.                         titlepic: "../../static/demo/datapic/13.jpg",
  229.                         video: false,
  230.                         share: false,
  231.                         path: "深圳 龙岗",
  232.                         sharenum: 20,
  233.                         commentnum: 30,
  234.                         goodnum: 20
  235.                     };
  236.                     this.guanzhu.list.push(obj);
  237.                     this.guanzhu.loadtext = "上拉加载更多";
  238.                 }, 1000);
  239.                 // this.guanzhu.loadtext="没有更多数据了";
  240.             }
  241.         }
  242.     }
  243. </script>
  245. <style>
  246.     .search-input {
  247.         /* border: 1upx solid; */
  248.         padding: 20upx;
  249.     }
  251.     .search-input>input {
  252.         /* border: 1upx solid; */
  253.         background: #F4F4F4;
  254.         border-radius: 10upx;
  255.     }
  257.     .topic-search {
  258.         display: flex;
  259.         justify-content: center;
  260.         font-size: 27upx;
  261.     }
  263.     .topic-swiper {
  264.         padding: 0 20upx 20upx 20upx;
  265.     }
  267.     .topic-swiper image {
  268.         width: 100%;
  269.         border-radius: 10upx;
  270.     }
  272. </style>

结束