跳转至

咸虾米

【零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等】https://www.bilibili.com/video/BV1Yg4y127Fp?p=70&vd_source=30dd7415f8803aeec3a108e0d178d1cf

7.12 之前的一个点，忘记是什么了

一些点

scss 语法

.box {
  &-item{
    color:red;
  }
}

/* 等同于 */

.box .box-item{
  color:red
}

左右渐变 + 上下渐变

.pageBg{
    background: 
    linear-gradient(to bottom,transparent,#fff 400rpx),
    linear-gradient(to right,#beecd8 20%,#F4E2D8);
    min-height: 80vh;
}

样式穿透

.left {
  :deep(){
    .uni.icons {
      color: red;
    }
  }
}

行内跳转tabBar

<navigator url="" open-type="reLaunch"></navigator>

定位居住，并根据内容自动宽度

.count {
  position: absolute;
  top: 10vh;
  left: 0;
  /* 重点 */
  right: 0;
  margin: auto;
  width: fit-content;
  /* 重点 */
}

弹窗标题部分布局

使用空标签控制布局

<view>
  <view></view>
  <view>标题</view>
  <view>关闭icon</view>
</view>

.popHeader｛
  display: flex;
  justify-content: space-between;
  align-items: center; 
｝

涉及弹窗滚动相关的使用 <scroll-view>

<scroll-view> 标签

使用flex防止挤压

父元素 使用flex，子元素使用 flex:1 的时候，防止内容过长挤压兄弟元素，可以添加一个 width:0 来处理

grid 布局

适合一行多列的布局

子元素宽度百分比，高度需要自定义

如果子元素为image，最后使用 display: block; 来处理图片的间距问题

<view class="grid">
  <view class="grid-item">1</view>
  <view class="grid-item">2</view>
  <view class="grid-item">3</view>
  <view class="grid-item">4</view>
  <view class="grid-item">5</view>
  <view class="grid-item">6</view>
  <view class="grid-item">7</view>
  <view class="grid-item">8</view>
  <view class="grid-item">9</view>
</view>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列 */
  grid-gap: 10rpx; /* 间距 */
}
.grid-item {
  background-color: #f0f0f0;
  padding: 20rpx;
  text-align: center;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #333;
  box-shadow: 0 2rpx 4rpx rgba(0,0, 0, 0.1);
}
.grid-item:nth-child(odd) {
  background-color: #e0e0e0; /* 奇数项背景色 */
}

.grid-item:nth-child(even) {
  background-color: #d0d0d0; /* 偶数项背景色 */
}

css中有公用的代码

直接提取到顶层就行了，也就是没有父class约束的地方，这样就公用了

.father {
  /* .common {
  } */
}
.child {
  /* .common {
  } */
}
.common {
  /* 公用 */
}

定义背景色后底部白色线

分辨率问题，放大就没有了

计算顶部tabbar - 7.20节

顶部tabbar的高度计算及胶囊的兼容

let SYSTEM_INFO = uni-getSystemInfoSync();
let statusBarHeight = ref(SYSTEM_INFO.statusBarHeight); 
let {top,height} = uni.getMenuButtonBoundingClientRectO; 
let titleBarHeight = ref(height + (top - statusBarHeight.value)*2);
console.log(titleBarHeight);

map、finIndex 记得补充查看

var a = [
  { "name": "Alice", "age": 30 },
  { "name": "Bob", "age": 25 },
  { "name": "Charlie", "age": 35 }
];
// console.log(a.map(item => item.name)); // 输出: ["Alice", "Bob", "Charlie"]
// console.log(a.map(item => item.age)); // 输出: [30, 25,

var b = a.map( item => item.age );
console.log(b); // 输出: [30, 25, 35]

var c = a.map(item => {
  return {
    ...item,
    address: "Unknown"
  }
})
console.log(c); // 输出: [{ name: "Alice", age: 30, address: "Unknown" }, { name: "Bob", age: 25, address: "Unknown" }, { name: "Charlie", age: 35, address: "Unknown" }

var a = [
  { "name": "Alice", "age": 30 , id: 1},
  { "name": "Bob", "age": 25 , id: 2},
  { "name": "Charlie", "age": 35 , id: 3},
  { "name": "David", "age": 40 , id: 4},
];
// 定义一个变量id，值为4
var id = 4;
// 使用findIndex方法查找数组a中id为4的元素索引
var d = a.findIndex(item => item.id === id);
// 打印索引和对应的元素
console.log(d, a[d]);

待学习

  • 深度解构