1.UI给的tabBar活跃状态图没文字 不想写文字卡在图片里了
直接自己去即时设计添加了个带文字的图 jpg格式 并且大小控制在77px × 33px 自以为很聪明 哈哈哈
2.小程序几乎每个页面都用到了相同的背景图 想到全局设定一下
在common-style.scss中 设置全局背景图样式
这里直接让其绝对定位并设置z-index覆盖级别较低 让其成为背景 不占用其他盒子位置
.page_top_background {
width: 100%;
box-sizing: border-box;
height: 494rpx;
background: url("/common/images/index/header_background.jpg");
background-size: 100% 100%;
position: absolute;
z-index: -1;
}在想用到这个背景的地方添加一个带全局背景属性的盒子即可
<template>
<view class="user">
<view class="page_top_background">
</view>
</view>
</template>现在看起来就像这样 至于顶部胶囊按钮和手机状态栏空间 我目前想法是可以设置一个背景为透明色的填充盒子 这样也可以实现渐变色标题
3.不同小卡片设置不同背景 写行内样式设置背景微信小程序不显示图片(虽然web端是正常的)
改成动态设置还是没用 可能是渲染层出现了什么问题
目前想到解决方案是额外添加样式 强制改变设置背景图
.bg1 {
background: url('/common/images/user/phone.jpg') !important;
}
.bg2 {
background: url('/common/images/user/area.jpg') !important;
}
.bg3 {
background: url('/common/images/user/industry.jpg') !important;
}在页面中加上对应背景图类即可
<view class="card_icon bg1"></view>
<view class="card_icon bg2"></view>
<view class="card_icon bg3"></view>4.实现毛玻璃效果—backdrop-filter属性
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）
因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明
这样使用即可 注意必须添加不透明度!
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(80rpx);5.前端发起请求 步骤还挺烦的 得封装一下
(1) 别忘了在微信开发者工具里面添加发送请求的合法域名
(2) 在utils下新建request.js 设置BASE_URL基地址
(3) 配置请求拦截器/响应拦截器……(PS:暂时没用到)
(4) 实现并导出request函数 使用Uniapp自带的请求方法uni.request和Promise实现 代码如下
export function request(config = {}) {
let {
url,
method = "GET",
header = {},
data = {} //接收一下data
} = config
url = BASE_URL + url
return new Promise((resolve, reject) => {
uni.request({
url,
data,
method,
header,
success: res => {
if (res.data.errCode != 0) {
//向内走一层 获取数据时就不需要写res.data.data了
resolve(res.data)
} else if (res.data.errCode === 400) {
uni.showModal({
title: '错误提示',
content: res.data.errMsg,
showCancel: false
})
reject(res.data)
} else {
uni.showToast({
title: res.data.errMsg,
icon: "none"
})
reject(res.data)
}
},
fail: err => {
reject(err)
}
})
})
}(5) 封装api/api.js 在这里导入request函数 再存放各个发起请求的函数
(6) 在需要调用接口的地方引入请求函数 并解析获取数据 下面以获取企业信息接口为例
import { apiGetEnterpriseInfo } from "@/api/api.js"; //引入
const enterpriseInfo = ref({}) //定义数据
const getEnterpriseInfo = () => {
apiGetEnterpriseInfo().then(res => {
// console.log(res.data.userInfo);
enterpriseInfo.value = res
console.log(enterpriseInfo.value)
})
} //定义函数
getEnterpriseInfo() //调用6.JavaScript的slice, splice, split方法区分 总是搞混了
想要处理一下请求来的用户住址数据来着(太长了) 忘记是哪个方法 名字记混了 slice() nb!
(1) splice() 修改原数组，可以删除、替换或添加元素
array.splice(start, deleteCount, item1, item2, …)
- start：开始修改的位置
- deleteCount：要删除的元素个数（可选）
- item1, item2…：要添加的元素（可选）
(2) slice() 提取数组或字符串的一部分，不修改原数据
array.slice(start, end)
string.slice(start, end)
- start：开始位置（包含）
- end：结束位置（不包含，可选）
(3) split() 将字符串按指定分隔符分割成数组
string.split(separator, limit)
- separator：分隔符（可以是字符串或正则表达式）
- limit：限制返回数组的最大长度（可选）
7.远古遗留问题解决 scroll-view内部元素横向移动 多看微信开发者工具!
这里进行中的项目小方块 可以向左滑动
我的想法是给scroll-view外面套一个盒子 给这个盒子设置overflow : hidden; 属性
然后在scroll-view里面加入 小方块元素 大致是根据文档来的 但是就是不行
接着我就给这父级盒子加上flex属性 还是不行 每天尝试解决都没解决
后面我又加上:deep( ) 去改变属性 web端成功改过来了 但是小程序端还是不行
结果今天在微信开发者工具检查时 发现竟然有Warning!!!
在scroll-view标签内添加enable-flex属性即可!!!
好吧其实Uniapp文档是有的 以后仔细点看文档吧 还有微信开发者工具 在里面检查会更直观
8边界阴影效果
首先想到的就是使用box-shadow 设置inset 代表向内部的阴影
但是问题是这里要遮住小方块 阴影的优先级比较低 会显示在方块的下面
然后又想到在靠右部分定位一个盒子 设置盒子的向内部阴影 结果也是看起来一般
最后使用伪元素定位小盒子 确定位置并设置背景颜色之后 添加filter : blur() 属性 效果还不错
&::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 32rpx;
background: #a878fd;
height: 118rpx;
filter: blur(30rpx); //blur(radius) radius表示模糊半径
}
但我觉得还需要改进一下