开始

封装组件

已登录
image.png

这几块分别都可以封装成组件
image.png

封装组件-列表

image.png
首先来构建data数据
image.png

  1. list:[
  2.                     { icon:"liulan",name:"浏览历史" },
  3.                     { icon:"huiyuanvip",name:"糗百认证" },
  4.                     { icon:"keyboard",name:"审核糗事" },
  5.                 ]

循环
image.png

image.png

  1. <view class="home-list">
  2.             <block v-for="(item,index) in list" :key="index">
  3.                 <view class="home-list-item u-f-ac u-f-jsb" hover-class="home-list-hover">
  4.                     <view class="u-f-ac">
  5.                         <view class="icon iconfont"
  6.                         :class="['icon-'+item.icon]"></view>
  7.                         {{item.name}}
  8.                     </view>
  9.                     <view class="icon iconfont icon-jinru"></view>
  10.                 </view>
  11.             </block>
  12.         </view>

image.png
改颜色
image.png

  1. .home-list-item {
  2.         padding: 20upx;
  3.         border-top: 1upx solid #F4F4F4;
  4.         border-bottom: 1upx solid #F4F4F4;
  5.     }

image.png

封装列表组件

先新建home目录，然后新建组件home-list-item组件。
image.png

image.png

  1. <view class="home-list-item u-f-ac u-f-jsb" hover-class="home-list-hover">
  2.         <view class="u-f-ac">
  3.             <view class="icon iconfont"
  4.             :class="['icon-'+item.icon]"></view>
  5.             {{item.name}}
  6.         </view>
  7.         <view class="icon iconfont icon-jinru"></view>
  8.     </view>

image.png

  1. <style scoped>
  2.     .home-list-item {
  3.         padding: 20upx;
  4.         border-top: 1upx solid #F4F4F4;
  5.         border-bottom: 1upx solid #F4F4F4;
  6.     }
  8.     .home-list-item>view:first-child {
  9.         color: #333333;
  10.     }
  12.     /* 左侧图标距离文字的间距 */
  13.     .home-list-item>view:first-child>view {
  14.         margin-right: 10upx;
  15.     }
  17.     /* 右边箭头 */
  18.     .home-list-item>view:last-child {
  19.         color: #CCCCCC;
  20.     }
  22.     .home-list-hover {
  23.         background: #f4f4f4;
  24.     }
  25. </style>

image.png

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

引用组件

image.png

  1. import homeListItem from '@/components/home/home-list-item.vue';

image.png

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

封装登录后组件

image.png

构建数据
image.png

  1. homeinfo:{
  2.                     userpic:"../../static/demo/userpic/11.jpg",
  3.                     username:"昵称",
  4.                     totalnum:0,
  5.                     todaynum:0,
  6.                 },

image.png

  1. <view class="home-info u-f-ac">
  2.             <image :src="homeinfo.userpic" mode="widthFix" lazy-load="true"></image>
  3.             <view class="u-f1">
  4.                 <view>{{homeinfo.username}}</view>
  5.                 <view>总访客 {{homeinfo.totalnum}} 今日 {{homeinfo.todaynum}}</view>
  6.             </view>
  7.             <view class="icon iconfont icon-jinru"></view>
  8.         </view>

封装组件

image.png

image.png
css
image.png

  1. <style scoped>
  2.     /* 登陆后的 */
  3.     .home-info {
  4.         padding: 40upx;
  5.     }
  7.     .home-info>image {
  8.         flex-shrink: 0;
  9.         width: 100upx;
  10.         height: 100upx;
  11.         border-radius: 100%;
  12.         margin-right: 15upx;
  13.     }
  15.     /* 最右侧的箭头 */
  16.     .home-info>view:last-of-type {
  17.         height: 100%;
  18.         /* width: 70upx; */
  19.     }
  21.     /* 昵称 */
  22.     .home-info>view:first-of-type>view:first-child {
  23.         font-size: 32upx;
  24.     }
  26.     /* 总访客 */
  27.     .home-info>view:first-of-type>view:last-child {
  28.         color: #BBBBBB;
  29.     }
  30. </style>

image.png

  1. export default{
  2.         props:{
  3.             homeinfo: Object
  4.         }
  5.     }

引用组件

image.png

  1. import homeInfo from '@/components/home/home-info.vue';

image.png

  1. <home-info :homeinfo="homeinfo"></home-info>

封装组件-第三方登陆

image.png

image.png

  1. <view class="other-login u-f-ac">
  2.                 <view class="u-f-ajc u-f1">
  3.                     <view class="icon iconfont icon-weixin u-f-ajc"></view>
  4.                 </view>
  5.                 <view class="u-f-ajc u-f1">
  6.                     <view class="icon iconfont icon-xinlangweibo u-f-ajc"></view>
  7.                 </view>
  8.                 <view class="u-f-ajc u-f1">
  9.                     <view class="icon iconfont icon-QQ u-f-ajc"></view>
  10.                 </view>
  11.             </view>

css,

  1. .other-login {
  2.         padding: 20upx 80upx;
  3.     }
  5.     .other-login>view>view {
  6.         width: 100upx;
  7.         height: 100upx;
  8.         /* border: 1px solid; */
  9.         border-radius: 100%;
  10.         font-size: 55upx;
  11.         color: #FFFFFF;
  12.     }
  14.     .other-login .icon-QQ {
  15.         background: #2CAEFC;
  16.     }
  18.     .other-login .icon-weixin {
  19.         background: #2BD19B;
  20.     }
  22.     .other-login .icon-xinlangweibo {
  23.         background: #FC7729;
  24.     }

不需要传任何值进来。
image.png

image.png

  1.     <template v-else>
  2.             <!-- 登陆 -->
  3.             <home-info :homeinfo="homeinfo"></home-info>
  4.         </template>

封装数据

image.png

image.png

  1. homedata: [{
  2.                         name: "糗事",
  3.                         num: 0
  4.                     },
  5.                     {
  6.                         name: "动态",
  7.                         num: 0
  8.                     },
  9.                     {
  10.                         name: "评论",
  11.                         num: 0
  12.                     },
  13.                     {
  14.                         name: "收藏",
  15.                         num: 0
  16.                     },
  17.                 ],

image.png

image.png

  1. <view class="home-data u-f-ac">
  2.             <block v-for="(item,index) in homedata" :key="index">
  3.                 <view class="u-f1 u-f-ajc u-f-column">
  4.                     <view>{{item.num}}</view>{{item.name}}
  5.                 </view>
  6.             </block>
  7.         </view>

image.png

  1. <view class="home-data u-f-ac">
  2.             <block v-for="(item,index) in homedata" :key="index">
  3.                 <view class="u-f1 u-f-ajc u-f-column">
  4.                     <view>{{item.num}}</view>{{item.name}}
  5.                 </view>
  6.             </block>
  7.         </view>

image.png

  1. <style scoped>
  2.     .home-data {
  3.         padding: 20upx 40upx;
  4.     }
  6.     .home-data>view {
  7.         color: #989898;
  8.     }
  10.     .home-data>view>view {
  11.         font-size: 32upx;
  12.         color: #333333;
  13.     }
  14. </style>

image.png

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

image.png

  1. import homeData from '@/components/home/home-data.vue';
  3. homeData

image.png

  1.     <!-- 4个数据 -->
  2.     <home-data :homedata="homedata"></home-data>

测试

image.png

改成未登陆
image.png

image.png

本节代码

home-list-item.vue组件

  1. <template>
  2.     <view class="home-list-item u-f-ac u-f-jsb" hover-class="home-list-hover">
  3.         <view class="u-f-ac">
  4.             <view class="icon iconfont"
  5.             :class="['icon-'+item.icon]"></view>
  6.             {{item.name}}
  7.         </view>
  8.         <view class="icon iconfont icon-jinru"></view>
  9.     </view>
  10. </template>
  12. <script>
  13.     export default{
  14.         props:{
  15.             item: Object,
  16.             index: Number
  17.         }
  18.     }
  19. </script>
  21. <style scoped>
  22.     .home-list-item {
  23.         padding: 20upx;
  24.         border-top: 1upx solid #F4F4F4;
  25.         border-bottom: 1upx solid #F4F4F4;
  26.     }
  28.     .home-list-item>view:first-child {
  29.         color: #333333;
  30.     }
  32.     /* 左侧图标距离文字的间距 */
  33.     .home-list-item>view:first-child>view {
  34.         margin-right: 10upx;
  35.     }
  37.     /* 右边箭头 */
  38.     .home-list-item>view:last-child {
  39.         color: #CCCCCC;
  40.     }
  42.     .home-list-hover {
  43.         background: #f4f4f4;
  44.     }
  45. </style>

home-info.vue组件

  1. <template>
  2.     <view class="home-info u-f-ac">
  3.         <image :src="homeinfo.userpic" mode="widthFix" lazy-load="true"></image>
  4.         <view class="u-f1">
  5.             <view>{{homeinfo.username}}</view>
  6.             <view>总访客 {{homeinfo.totalnum}} 今日 {{homeinfo.todaynum}}</view>
  7.         </view>
  8.         <view class="icon iconfont icon-jinru"></view>
  9.     </view>
  10. </template>
  12. <script>
  13.     export default{
  14.         props:{
  15.             homeinfo: Object
  16.         }
  17.     }
  18. </script>
  20. <style scoped>
  21.     /* 登陆后的 */
  22.     .home-info {
  23.         padding: 40upx;
  24.     }
  26.     .home-info>image {
  27.         flex-shrink: 0;
  28.         width: 100upx;
  29.         height: 100upx;
  30.         border-radius: 100%;
  31.         margin-right: 15upx;
  32.     }
  34.     /* 最右侧的箭头 */
  35.     .home-info>view:last-of-type {
  36.         height: 100%;
  37.         /* width: 70upx; */
  38.     }
  40.     /* 昵称 */
  41.     .home-info>view:first-of-type>view:first-child {
  42.         font-size: 32upx;
  43.     }
  45.     /* 总访客 */
  46.     .home-info>view:first-of-type>view:last-child {
  47.         color: #BBBBBB;
  48.     }
  49. </style>

other-login.vue组件

home-data.vue组价

  1. <template>
  2.     <view class="home-data u-f-ac">
  3.         <block v-for="(item,index) in homedata" :key="index">
  4.             <view class="u-f1 u-f-ajc u-f-column">
  5.                 <view>{{item.num}}</view>{{item.name}}
  6.             </view>
  7.         </block>
  8.     </view>
  9. </template>
  11. <script>
  12.     export default{
  13.         props:{
  14.             homedata: Array
  15.         }
  16.     }
  17. </script>
  19. <style scoped>
  20.     .home-data {
  21.         padding: 20upx 40upx;
  22.     }
  24.     .home-data>view {
  25.         color: #989898;
  26.     }
  28.     .home-data>view>view {
  29.         font-size: 32upx;
  30.         color: #333333;
  31.     }
  32. </style>

home.vue页面

  1. <template>
  2.     <view>
  3.         <template v-if="!islogin">
  4.             <!-- 未登陆 -->
  5.             <view class="u-f-ajc">登陆仿糗百，体验更多功能</view>
  6.             <!-- 第三方登陆 -->
  7.             <other-login></other-login>
  8.             <!-- 账号密码登陆 -->
  9.             <view class="u-f-ajc">
  10.                 账号密码登陆<view class="icon iconfont icon-jinru"></view>
  11.             </view>
  13.         </template>
  14.         <template v-else>
  15.             <!-- 登陆 -->
  16.             <home-info :homeinfo="homeinfo"></home-info>
  17.         </template>
  18.         <!-- 4个数据 -->
  19.         <home-data :homedata="homedata"></home-data>
  21.         <!-- 广告位 -->
  22.         <view class="home-adv u-f-ajc">
  23.             <image src="../../static/demo/demo20.jpg" mode="widthFix" lazy-load="true"></image>
  24.         </view>
  25.         <!-- 功能列表 -->
  26.         <view class="home-list">
  27.             <block v-for="(item,index) in list" :key="index">
  28.                 <home-list-item :item="item" :index="index"></home-list-item>
  29.             </block>
  30.         </view>
  33.     </view>
  34. </template>
  36. <script>
  37.     import homeListItem from '@/components/home/home-list-item.vue';
  38.     import homeInfo from '@/components/home/home-info.vue';
  39.     import otherLogin from '@/components/home/other-login.vue';
  40.     import homeData from '@/components/home/home-data.vue';
  41.     export default {
  42.         components: {
  43.             homeListItem,
  44.             homeInfo,
  45.             otherLogin,
  46.             homeData
  47.         },
  48.         data() {
  49.             return {
  50.                 islogin: false,
  51.                 homeinfo: {
  52.                     userpic: "../../static/demo/userpic/11.jpg",
  53.                     username: "昵称",
  54.                     totalnum: 0,
  55.                     todaynum: 0,
  56.                 },
  57.                 homedata: [{
  58.                         name: "糗事",
  59.                         num: 0
  60.                     },
  61.                     {
  62.                         name: "动态",
  63.                         num: 0
  64.                     },
  65.                     {
  66.                         name: "评论",
  67.                         num: 0
  68.                     },
  69.                     {
  70.                         name: "收藏",
  71.                         num: 0
  72.                     },
  73.                 ],
  74.                 list: [{
  75.                         icon: "liulan",
  76.                         name: "浏览历史"
  77.                     },
  78.                     {
  79.                         icon: "huiyuanvip",
  80.                         name: "糗百认证"
  81.                     },
  82.                     {
  83.                         icon: "keyboard",
  84.                         name: "审核糗事"
  85.                     },
  86.                 ]
  87.             }
  88.         },
  89.         onNavigationBarButtonTap(e) {
  90.             if (e.index == 0) {
  91.                 console.log('跳转设置页');
  92.             }
  93.         },
  94.         methods: {
  96.         }
  97.     }
  98. </script>
  100. <style>
  101.     .home-list {
  102.         padding: 20upx;
  103.     }
  105.     .home-adv {
  106.         padding: 20upx;
  107.     }
  109.     .home-adv>image {
  110.         border-radius: 20upx;
  111.         height: 150upx;
  112.     }
  113. </style>

结束