来自分类 Vue2020-12-18 11:01:53
@[toc]
# 需求: 仿微信聊天
需求很简单, 就是仿微信聊天, 下拉加载历史聊天记录时, 能保持浏览位置, 在网上找了一些例子都不太完美, 要么不能保持浏览位置, 要么会来回跳一下, 反正就是效果不好, 决定还是自己研究研究
# 处理方法
## template 模板部分
使用 uniapp 自带的`scroll-view`来做滚动容器, 需要配合以下属性:
1. `scroll-y`: 允许纵向滚动
2. `scroll-top`: 设置竖向滚动条位置
3. `upper-threshold`: 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
4. `@scrolltoupper`: 滚动到顶部/左边，会触发 scrolltoupper 事件
5. `scroll-anchoring`: 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效
```html
<scroll-view
class="msg-list"
scroll-y="true"
:scroll-top="...
来自分类 Vue2020-11-23 14:17:36
@[toc]
### 需求
页面中接口, 需要带上用户信息或者是某个鉴权字段, 这个用户信息或者鉴权字段由某个接口返回
### 原生 Vue 中的处理方法
#### 1.vuex 配置
```javascript
import api from '@/api'
const state = {
userInfo: null, // 需要的用户数据
globalLoading: true // 一个全局loading, 根据这个字段觉得是否显示一个全局的loading小狗
}
const actions = {
// 读取用户信息
async ['getUserInfo'](store) {
const { commit } = store
const { data, code } = await api('/api/user/user_info')
if (code === 200) {
commit('receiveUserInfo', data)
}
...
来自分类 Vue2020-11-23 14:13:27
@[toc]
# 1. 首先你得有台服务器
# 2. 推荐安装 linux 系统
本文以 CentOS 7.2 为例
# 3. 更换 yum 为国内镜像
1. 备份你的原镜像文件，以免出错后可以恢复。
```bash
# mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup
```
2. 下载新的CentOS-Base.repo 到/etc/yum.repos.d/
```bash
// CentOS 5
# wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-5.repo
// CentOS 6
# wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-6.repo
// CentOS 7
# wget -O /etc/yum.repos.d/CentOS-B...
来自分类 前端2020-11-23 14:10:37
@[toc]
# react
React 相关
===实例===
https://github.com/jesseskinner/react-webpack-demo
===UI组件库===
https://github.com/amazeui/amazeui-react `React UI组件库`
https://github.com/ant-design/ant-design `React 企业级的UI库`
https://github.com/callemall/material-ui `React UI组件库`
https://github.com/icecreamliker/uskin `React UI组件库`
https://github.com/grommet/grommet `最先进用户体验的企业应用程序框架`
https://github.com/Lobos/react-ui `React UI组件库`
https://github.com/mlaursen/react-md `这是另一个基于谷歌 Material Design 设计规范的库`
https://g...
来自分类 JavaScript2020-10-27 11:07:16
相当于 $(el).before('html' | element)
```javascript
el.insertAdjacentHTML('beforeBegin', 'html');
el.insertAdjacentElement('beforebegin', element)
```
相当于 $(el).prepend('html' | element)
```javascript
el.insertAdjacentHTML('afterBegin', 'html');
el.insertBefore(element, el.firstChild)
```
相当于 $(el).append('html' | element)
```javascript
el.insertAdjacentHTML('beforeEnd', 'html');
el.appendChild(element)
```
相当于 $(el).after('html' | element)
```javascript
el.insertAdjacentHTML('afterEnd', 'html')...
来自分类 前端2020-10-21 13:07:32
#### 代码入下:
```javascript
function addGlobalStyle(css) {
var head, style
head = document.getElementsByTagName('head')[0]
if (!head) {
return
}
style = document.createElement('style')
style.innerHTML = css
head.appendChild(style)
}
function removeNodeInsertedListener(bindedFunc) {
var eventTypeList = ['animationstart', 'webkitAnimationStart', 'MSAnimationStart', 'oAnimationStart']
eventTypeList.forEach(function (eventType) {
document.removeEven...
来自分类 前端2020-08-27 13:22:48
#### 问题
很多网站都有类似「点击加载更多」的功能, 点击按钮后请求 ajax,然后在原列表后追加相关内容, 之前一直滚动条位置不变, 追加元素后, 页面还是列表原来的位置
但是今天发现, 追加元素后, 滚动条位置会自动滚动到「点击加载更多」按钮的位置, 这会造成浏览时很大的麻烦, 加载分页后, 还要往上滚动去找加载分页前的位置, 实在不方便
具体例子可以参考百度百科中的角色介绍的展开全部功能, 相关链接: https://baike.baidu.com/item/%E7%AC%91%E5%82%B2%E6%B1%9F%E6%B9%96/10719298#4
一系列的排查之后, 最终发现是浏览器的问题, 受...
来自分类 前端2020-06-24 10:35:08
```
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"types": ["uni-app", "html5plus"]
},
"include": ["./src/**/*"],
"files": ["main.ts"]
}
```
只需要在项目根目录随便创建一个空白的`.ts`文件, 然后在`tsconfig.json`添加`files`键即可, 如上面配置...
来自分类 前端2019-12-28 19:30:34
一年多过去了, `Optional Chaining`终于到`Stage 3`了, vscode 之类编辑器也有办法支持该语法了, 现在想用, 可以用`babel`来实现了
#### 安装插件
```bash
# yarn add @babel/plugin-proposal-optional-chaining --dev // 可选链
# yan add @babel/plugin-proposal-nullish-coalescing-operator --dev // 空值合并
```
#### 在 babel 配置文件里添加插件
```javascript
plugins: [
// 其他插件
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-nullish-coalescing-operator'
]
```
这样就可以在 js, jsx, vue 里面用了
##### 在 .jsx 中使用:
```javascript
render() {
c...
来自分类 React2019-12-28 19:16:01
需求: 1、需要路由切换动画, 2、从详情页返回列表页时, 需要滚动到历史位置
咋一看, 这不挺简单的吗?
使用`redux`做数据的临时存储, 在`componentWillUnmount`钩子里, 读取滚动条位置, 然后保存到本地存储
当从详情页或者其他页面返回列表页时, 判断`redux`里是否有数据, 如果有数据直接读取, 不再发起请求, 在`componentDidMount`钩子里读取本地存储的滚动条位置, 然后滚动到相应位置不就行了吗
上面的思路在没有路由动画时, 是可行的, 但是有路由动画的话, 就不行了, 你会发现在`componentWillUnmount`钩子里取到的滚动条位置, 总是不对的
主要原因是, 为了用户体验, 在详情页需要`componentDidMount`钩子里将滚动条设置为0, 不然在进入详情页时, 滚动条位置会不在顶部
再加上, 添加了路由动画后, 从列表页进入详情页, 有一小段时间, 列表页和详情页这两个组件会同时存在, 而且两个页面钩子的执行顺序为: 详情页的`componentDidMount` => 列表页的`compone...
