开始

扩展组件—->list列表

构建个人中心的UI
image.png
垂直水平方向居中
image.png

image.png

  1. <view>
  2.         <!-- 未登陆 -->
  3.         <view class="u-f-ajc">登陆仿糗百，体验更多功能</view>
  4.         <!-- 第三方登陆 -->
  5.         <view class="other-login">
  6.             <view><view class="icon iconfont icon-weixin"></view></view>
  7.             <view><view class="icon iconfont icon-weixin"></view></view>
  8.             <view><view class="icon iconfont icon-weixin"></view></view>
  9.         </view>
  10.     </view>

垂直居中
image.png

image.png

image.png

  1. .other-login{
  2.         padding:20upx;
  3.     }
  4.     .other-login>view>view{
  5.         width: 100upx;
  6.         height: 100upx;
  7.         border: 1px solid;
  8.         border-radius: 100%;
  9.         font-size: 55upx;
  10.     }

此时没有居中显示。
image.png
封装flex ，让每一个都占flex:1
image.png

  1. .u-f1{
  2.     flex: 1;
  3. }

image.png

  1. <view class="other-login u-f-ac">
  2.             <view class="u-f-ajc u-f1"><view class="icon iconfont icon-weixin"></view></view>
  3.             <view class="u-f-ajc u-f1"><view class="icon iconfont icon-weixin"></view></view>
  4.             <view class="u-f-ajc u-f1"><view class="icon iconfont icon-weixin"></view></view>
  5.         </view>

他们的间距有点大了。
image.png
左右的间距搞大一点。
image.png

  1. .other-login{
  2.         padding:20upx 40upx;
  3.     }

图标都垂直布局
image.png

  1. <view class="other-login u-f-ac">
  2.             <view class="u-f-ajc u-f1"><view class="icon iconfont icon-weixin u-f-ajc"></view></view>
  3.             <view class="u-f-ajc u-f1"><view class="icon iconfont icon-weixin u-f-ajc"></view></view>
  4.             <view class="u-f-ajc u-f1"><view class="icon iconfont icon-weixin u-f-ajc"></view></view>
  5.         </view>

image.png
间距改成80
image.png
左右间距变大，这样3个图标就会越往中间靠
image.png

改下图标
image.png

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

边框删掉
image.png
添加默认的颜色，其他三个图标都单独设置样式
image.png

吸取这3个图标的颜色
image.png

image.png

  1. .other-login .icon-QQ{
  2.         background: #2CAEFC;
  3.     }
  4.     .other-login .icon-weixin{
  5.         background: #2BD19B;
  6.     }
  7.     .other-login .icon-xinlangweibo{
  8.         background: #FC7729;
  9.     }

image.png

image.png

image.png

  1. <!-- 账号密码登陆 -->
  2.         <view class="u-f-ajc">
  3.             账号密码登陆<view class="icon iconfont icon-jinru"></view>
  4.         </view>

数据

分为4个部分
image.png

  1. <view class="home-data">
  2.             <view><view>0</view>糗事</view>
  3.             <view><view>0</view>动态</view>
  4.             <view><view>0</view>评论</view>
  5.             <view><view>0</view>收藏</view>
  6.         </view>

父元素是flex布局，下面每个元素平均等分4个部分。
image.png

  1. <view class="home-data u-f-ac">
  2.             <view class="u-f1"><view>0</view>糗事</view>
  3.             <view class="u-f1"><view>0</view>动态</view>
  4.             <view class="u-f1"><view>0</view>评论</view>
  5.             <view class="u-f1"><view>0</view>收藏</view>
  6.         </view>

flex布局 column上下布局
image.png

  1. .u-f-column{
  2.     flex-direction: column;
  3. }

flex布局 水平垂直居中，然后是上下结构的flex布局。
image.png

  1. <view class="home-data u-f-ac">
  2.             <view class="u-f1 u-f-ajc u-f-column"><view>0</view>糗事</view>
  3.             <view class="u-f1 u-f-ajc u-f-column"><view>0</view>动态</view>
  4.             <view class="u-f1 u-f-ajc u-f-column"><view>0</view>评论</view>
  5.             <view class="u-f1 u-f-ajc u-f-column"><view>0</view>收藏</view>
  6.         </view>

image.png
上下20，左右40. 左右内边距大一点，让按钮往中间聚聚
image.png

image.png
文字的颜色
image.png
image.png

  1. .home-data>view{
  2.         color: #989898;
  3.     }

里面数字的大小
image.png

image.png
数字的颜色，单独设置。数字颜色要比下面文字黑一点
image.png

image.png

广告位

image.png

image.png

还是外层套view的形式
image.png

图片是水平+垂直居中。
image.png

  1. <!-- 广告位 -->
  2.         <view class="home-adv u-f-ajc">
  3.             <image src="../../static/demo/demo20.jpg"
  4.             mode="widthFix" 
  5.             lazy-load="true"></image>
  6.         </view>

整体的内边距。图片的圆角。
image.png

  1. .home-adv{
  2.         padding: 20upx;
  3.     }
  4.     .home-adv>image{
  5.         border-radius: 20upx;
  6.     }

image.png
加一个图片的高度。

image.png

  1. .home-adv>image{
  2.         border-radius: 20upx;
  3.         height: 150upx;
  4.     }

image.png

浏览历史，糗百认证

image.png

image.png

image.png

image.png
找到官方demo的代码
image.png
image.png
D:\demos\uni-app\hello-uni-app2022\pages\extUI\list\list.nvue

image.png

image.png
把官方的demo复制过来
image.png
最新版本的uni-ui已经不再这样引用了。下面是视频中引用的方式。
image.png

image.png

  1. <!-- 功能列表 -->
  2.         <view class="home-list">
  3.             <uni-list>
  4.                 测试
  5.             </uni-list>
  6.         </view>

就是一个文字和下划线。
image.png

自己封装

所以不需要用到 这个组件，我们自己来封装
image.png

image.png

  1. <!-- 功能列表 -->
  2.         <view class="home-list">
  3.             <view class="u-f-ac u-f-jsb">
  4.                 <view class=""><view class="icon iconfont icon-liulan"></view>浏览历史</view>
  5.                 <view class="icon iconfont icon-jinru"></view>
  6.             </view>
  7.         </view>

flex布局
image.png

  1. <!-- 功能列表 -->
  2.         <view class="home-list">
  3.             <view class="u-f-ac u-f-jsb">
  4.                 <view class="u-f-ac">
  5.                     <view class="icon iconfont icon-liulan"></view>
  6.                     浏览历史
  7.                 </view>
  8.                 <view class="icon iconfont icon-jinru"></view>
  9.             </view>
  10.         </view>

image.png
每个元素单独加一个样式
image.png

  1. <!-- 功能列表 -->
  2.         <view class="home-list">
  3.             <view class="home-list-item u-f-ac u-f-jsb">
  4.                 <view class="u-f-ac">
  5.                     <view class="icon iconfont icon-liulan"></view>
  6.                     浏览历史
  7.                 </view>
  8.                 <view class="icon iconfont icon-jinru"></view>
  9.             </view>
  10.         </view>

image.png
上下边框
image.png

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

image.png
最爱我曾加个内边距
image.png

image.png
右侧箭头颜色
image.png

  1. /* 右边箭头 */
  2.     .home-list-item>view:last-child{
  3.         color: #CCCCCC;
  4.     }

image.png

image.png

  1. .home-list-item>view:first-child{
  2.         color: #333333;
  3.     }

image.png

点击效果

image.png

  1. home-list-hover

点击后的效果。
image.png
鼠标电商就是有选中的效果
image.png
左边图标 外边距
image.png

  1. /* 左侧图标距离文字的间距 */
  2.     .home-list-item>view:first-child>view{
  3.         margin-right: 10upx;
  4.     }

点击深色效果。
image.png

加到item上
image.png

  1.  hover-class="home-list-hover"

image.png

本节代码

  1. <template>
  2.     <view>
  3.         <!-- 未登陆 -->
  4.         <view class="u-f-ajc">登陆仿糗百，体验更多功能</view>
  5.         <!-- 第三方登陆 -->
  6.         <view class="other-login u-f-ac">
  7.             <view class="u-f-ajc u-f1"><view class="icon iconfont icon-weixin u-f-ajc"></view></view>
  8.             <view class="u-f-ajc u-f1"><view class="icon iconfont icon-xinlangweibo u-f-ajc"></view></view>
  9.             <view class="u-f-ajc u-f1"><view class="icon iconfont icon-QQ u-f-ajc"></view></view>
  10.         </view>
  11.         <!-- 账号密码登陆 -->
  12.         <view class="u-f-ajc">
  13.             账号密码登陆<view class="icon iconfont icon-jinru"></view>
  14.         </view>
  15.         <view class="home-data u-f-ac">
  16.             <view class="u-f1 u-f-ajc u-f-column"><view>0</view>糗事</view>
  17.             <view class="u-f1 u-f-ajc u-f-column"><view>0</view>动态</view>
  18.             <view class="u-f1 u-f-ajc u-f-column"><view>0</view>评论</view>
  19.             <view class="u-f1 u-f-ajc u-f-column"><view>0</view>收藏</view>
  20.         </view>
  21.         <!-- 广告位 -->
  22.         <view class="home-adv u-f-ajc">
  23.             <image src="../../static/demo/demo20.jpg"
  24.             mode="widthFix" 
  25.             lazy-load="true"></image>
  26.         </view>
  27.         <!-- 功能列表 -->
  28.         <view class="home-list">
  29.             <view class="home-list-item u-f-ac u-f-jsb" hover-class="home-list-hover">
  30.                 <view class="u-f-ac">
  31.                     <view class="icon iconfont icon-liulan"></view>
  32.                     浏览历史
  33.                 </view>
  34.                 <view class="icon iconfont icon-jinru"></view>
  35.             </view>
  36.         </view>
  37.     </view>
  38. </template>
  40. <script>
  41.     export default {
  42.         data() {
  43.             return {
  45.             }
  46.         },
  47.         onNavigationBarButtonTap(e) {
  48.             if(e.index==0) {
  49.                 console.log('跳转设置页');
  50.             }
  51.         },
  52.         methods: {
  54.         }
  55.     }
  56. </script>
  58. <style>
  59.     .home-list{
  60.         padding: 20upx;
  61.     }
  62.     .home-list-item{
  63.         padding: 20upx;
  64.         border-top: 1upx solid #EEEEEE;
  65.         border-bottom: 1upx solid #EEEEEE;
  66.     }
  67.     .home-list-item>view:first-child{
  68.         color: #333333;
  69.     }
  70.     /* 左侧图标距离文字的间距 */
  71.     .home-list-item>view:first-child>view{
  72.         margin-right: 10upx;
  73.     }
  74.     /* 右边箭头 */
  75.     .home-list-item>view:last-child{
  76.         color: #CCCCCC;
  77.     }
  78.     .home-list-hover{
  79.         background: #f4f4f4;
  80.     }
  82.     .other-login{
  83.         padding:20upx 80upx;
  84.     }
  85.     .other-login>view>view{
  86.         width: 100upx;
  87.         height: 100upx;
  88.         /* border: 1px solid; */
  89.         border-radius: 100%;
  90.         font-size: 55upx;
  91.         color: #FFFFFF;
  92.     }
  93.     .other-login .icon-QQ{
  94.         background: #2CAEFC;
  95.     }
  96.     .other-login .icon-weixin{
  97.         background: #2BD19B;
  98.     }
  99.     .other-login .icon-xinlangweibo{
  100.         background: #FC7729;
  101.     }
  102.     .home-data{
  103.         padding: 20upx 40upx;
  104.     }
  105.     .home-data>view{
  106.         color: #989898;
  107.     }
  108.     .home-data>view>view{
  109.         font-size: 32upx;
  110.         color: #333333;
  111.     }
  112.     .home-adv{
  113.         padding: 20upx;
  114.     }
  115.     .home-adv>image{
  116.         border-radius: 20upx;
  117.         height: 150upx;
  118.     }
  119. </style>

结束