开始

轮播图变成动态数据

轮播图的参数 应该写在数据里面 ，循环出来。
image.png

  1. topic:{
  2.                     swiper:[
  3.                         { src:"../../static/demo/banner2.jpg" },
  4.                         { src:"../../static/demo/banner2.jpg" },
  5.                         { src:"../../static/demo/banner2.jpg" },
  6.                     ]
  7.                 }

image.png

  1. <block v-for="(item,index) in topic.swiper" :key="index">
  2.                                 <swiper-item>
  3.                                     <image :src="item.src" mode="widthFix" lazy-load="true"></image>
  4.                                 </swiper-item>
  5.                             </block>

热门分类

上下有两条线。
image.png
分别两行，第一行左边靠边， 第二行flex布局 由6个组件组成。
image.png

开始构造

第一行
image.png
分为左右两边
image.png

  1. <view class="topic-nav">
  2.                             <view class="">
  3.                                 <view class="">热门分类</view>
  4.                                 <view class="">
  5.                                     更多<view class="icon iconfont icon-jinru"></view>
  6.                                 </view>
  7.                                 <view class=""></view>
  8.                             </view>
  9.                         </view>

flex布局和左右两边靠边
image.png

右边 flex布局，然后垂直方向居中。
image.png

  1. <view class="topic-nav">
  2.                             <view class="u-f-ajc u-f-jsb">
  3.                                 <view class="">热门分类</view>
  4.                                 <view class="u-f-ajc">
  5.                                     更多<view class="icon iconfont icon-jinru"></view>
  6.                                 </view>
  7.                                 <view class=""></view>
  8.                             </view>
  9.                         </view>

第二行放6个view组件
image.png
flex布局
image.png

写样式

image.png

  1. .topic-nav{
  3. }
  4.     .topic-nav>view:first-child{
  6.     }
  7.     .topic-nav>view:last-child{
  9.     }

上下边框，内边距
image.png

  1. .topic-nav{
  2.         border-bottom: 1upx solid #EEEEEE;
  3.         border-top: 1upx solid #EEEEEE;
  4.         padding: 20upx;
  5.     }

image.png

image.png

第二行的样式

标题和下面每个标签的距离外边距是10upx 每一个都平均分配 ，所以是flex为1
image.png

  1. .topic-nav>view:first-child{
  2.         margin-bottom: 10upx;
  3.     }
  4. .topic-nav>view:last-child>view{
  5.         flex: 1;
  6.     }

每一个都加背景色，圆角
image.png
左右两边都加上点间距
image.png
image.png
换个背景色
image.png

  1. .topic-nav>view:last-child>view{
  2.         flex: 1;
  3.         background: #dddddd;
  4.         color: #9E9E9E;
  5.         border-radius: 10upx;
  6.         margin: 0 10upx;
  7.     }

flex布局，并且居中
image.png

image.png

image.png

image.png

本节代码

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

结束