开始

动态页的，导航栏的 切换功能
image.png
功能和我们的首页功能上是差不多的
image.png
我们来复制首页上的某些代码。先复制 这整块代码
image.png
上面列表先注释
image.png

  2.             <swiper class="swiper-box" 
  3.             :style="{height: swiperheight+'px'}"
  4.             :current="tabIndex"
  5.             :change="tabChange">
  6.                 <swiper-item v-for="(items,index) in newslist" :key="index">
  7.                     <scroll-view scroll-y class="list" @scrolltolower="loadmore(index)" @scroll="scroll" 
  8.                     :style="{height: swiperheight+'px'}"
  9.                     :scroll-top="srcollTopValue">
  10.                         <template v-if="items.list.length>0">
  11.                             <!-- 图文列表 -->
  12.                             <block v-for="(item,index1) in items.list" :key="index1">
  13.                                 <index-list :item="item" :index="index1"></index-list>
  14.                             </block>
  15.                             <!-- 上拉加载 -->
  16.                             <load-more :loadtext="items.loadtext"></load-more>
  17.                         </template>
  18.                         <template v-else>
  19.                             <no-thing></no-thing>
  20.                         </template>
  21.                     </scroll-view>
  22.                 </swiper-item>
  23.             </swiper>

因为我们只有关注和话题 所以就不需要用到循环了。
image.png
上拉加载暂时也不需要
image.png
删除后，又新增 话题。
image.png

image.png
高度是计算的，也复制过去
image.png

  1. swiperheight:500,

onLoad复制过来
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.         },

还需要一个change事件
image.png
复制过来
image.png

  1. // 滑动事件
  2.             tabChange(e) {
  3.                 this.tabIndex = e.details.current
  4.             },

可以滑动了
image.png
把列表放在关注这里。
image.png

image.png

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.                         <!-- 列表 -->
  13.                         <block v-for="(item,index) in list" :ket="index">
  14.                             <common-list :item="item" :index="index"></common-list>
  15.                         </block>
  16.                     </scroll-view>
  17.                 </swiper-item>
  18.                 <!-- 话题 -->
  19.                 <swiper-item>
  20.                     <scroll-view scroll-y class="list">
  21.                         话题
  22.                     </scroll-view>
  23.                 </swiper-item>
  24.             </swiper>
  25.         </view>
  27.     </view>
  28. </template>
  30. <script>
  31.     import commonList from '@/components/common/common-list.vue';
  32.     import newsNavBar from '@/components/news/news-nav-bar.vue';
  33.     export default {
  34.         components: {
  35.             commonList,
  36.             newsNavBar
  37.         },
  38.         data() {
  39.             return {
  40.                 swiperheight: 500,
  41.                 tabIndex: 0,
  42.                 tabBars: [{
  43.                         name: '关注',
  44.                         id: 'guanzhu'
  45.                     },
  46.                     {
  47.                         name: '话题',
  48.                         id: 'toppic'
  49.                     },
  50.                 ],
  51.                 list: [
  52.                     // 文字
  53.                     {
  54.                         userpic: "../../static/demo/userpic/12.jpg",
  55.                         username: "哈哈",
  56.                         sex: 0, //0 男 1 女
  57.                         age: 25,
  58.                         isguanzhu: false,
  59.                         title: "我是标题",
  60.                         titlepic: "",
  61.                         video: false,
  62.                         share: false,
  63.                         path: "深圳 龙岗",
  64.                         sharenum: 20,
  65.                         commentnum: 30,
  66.                         goodnum: 20
  67.                     },
  68.                     // 图文
  69.                     {
  70.                         userpic: "../../static/demo/userpic/12.jpg",
  71.                         username: "哈哈",
  72.                         sex: 0, //0 男 1 女
  73.                         age: 25,
  74.                         isguanzhu: false,
  75.                         title: "我是标题",
  76.                         titlepic: "../../static/demo/datapic/13.jpg",
  77.                         video: false,
  78.                         share: false,
  79.                         path: "深圳 龙岗",
  80.                         sharenum: 20,
  81.                         commentnum: 30,
  82.                         goodnum: 20
  83.                     },
  84.                     // 视频
  85.                     {
  86.                         userpic: "../../static/demo/userpic/12.jpg",
  87.                         username: "哈哈",
  88.                         sex: 0, //0 男 1 女
  89.                         age: 25,
  90.                         isguanzhu: false,
  91.                         title: "我是标题",
  92.                         titlepic: "../../static/demo/datapic/13.jpg",
  93.                         video: {
  94.                             looknum: "20w",
  95.                             long: "2:47"
  96.                         },
  97.                         share: false,
  98.                         path: "深圳 龙岗",
  99.                         sharenum: 20,
  100.                         commentnum: 30,
  101.                         goodnum: 20
  102.                     },
  103.                     // 分享
  104.                     {
  105.                         userpic: "../../static/demo/userpic/12.jpg",
  106.                         username: "哈哈",
  107.                         sex: 0, //0 男 1 女
  108.                         age: 25,
  109.                         isguanzhu: false,
  110.                         title: "我是标题",
  111.                         titlepic: "",
  112.                         video: false,
  113.                         share: {
  114.                             title: "我是分享的标题",
  115.                             titlepic: "../../static/demo/datapic/14.jpg"
  116.                         },
  117.                         path: "深圳 龙岗",
  118.                         sharenum: 20,
  119.                         commentnum: 30,
  120.                         goodnum: 20
  121.                     },
  122.                 ]
  123.             }
  124.         },
  125.         onLoad() {
  126.             uni.getSystemInfo({
  127.                 success: (res) => {
  128.                     console.log('当前window高度和窗口高度');
  129.                     console.log(res.windowHeight);
  130.                     console.log(res.screenHeight);
  131.                     let height = res.windowHeight - uni.upx2px(100)
  132.                     this.swiperheight = height;
  133.                 }
  134.             });
  135.         },
  136.         methods: {
  137.             // 点击切换
  138.             changeTab(index) {
  139.                 console.log('父页面点击:', index);
  140.                 this.tabIndex = index;
  141.             },
  142.             // 滑动事件
  143.             tabChange(e) {
  144.                 this.tabIndex = e.details.current
  145.             },
  146.         }
  147.     }
  148. </script>
  150. <style>
  154. </style>

结束