开始

左边是一张图片，右边分为了3行。 底部还有横线
image.png

构造布局

image.png

列表左边是图片
image.png
右边是一个view里面再嵌套3个view
image.png

  1. <view class="topic-new">
  2.                             <view class="">最近更新</view>
  3.                             <view class="topic-list">
  4.                                 <image src="../../static/demo/topicpic/13.jpeg"
  5.                                 mode="widthFix" lazy-load="true"></image>
  6.                                 <view class="">
  7.                                     <view class="">#话题名称</view>
  8.                                     <view class="">我是话题描述</view>
  9.                                     <view class="">动态 10 今日 5</view>
  10.                                 </view>
  11.                             </view>
  12.                         </view>

css

image.png

  1. .topic-new{
  2.         padding: 20upx;
  3.     }
  4.     .topic-new>view:first-child{
  5.         padding-bottom: 10upx;
  6.     }

列表和上下也有边距。上下为10 左右为0
image.png

image.png
最近更新字体放大
image.png

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

图片圆角居左。
image.png
右边加点间距
image.png

  1. .topic-list image{
  2.         width: 150upx;
  3.         height: 150upx;
  4.         border-radius: 10upx;
  5.         margin-right: 10upx;
  6.     }

flex布局
image.png

image.png
图片和右边间距增大
image.png
最下面有一条线
image.png

image.png

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

标题字体要大一些
image.png

取色灰色的字体
image.png
然后是标题自己，自定义字体的颜色
image.png

  1. .topic-list>view>view{
  2.         color: #A4A4A4;
  3.     }
  4.     .topic-list>view>view:first-child{
  5.         color: #333333;
  6.         font-size: 32upx;
  7.     }

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

结束