问题

媒体资源 添加 autoplay 在移动端不会生效

通过监听 scroll 事件 手动调用 play 方法会报如下错误:Uncaught (in promise) DOMException: play () failed because the user didn’t interact with the document first.

ios 端报如下错误:Uncaught (in promise) NotAllowedError:The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

自动播放政策

Chrome 浏览器的自动播放政策在 2018 年 4 月更改:

  • 始终允许静音自动播放。
  • 用户已与页面进行了交互(单击,点击等)。

详细政策不一一列举了,访问 https://goo.gl/xX8pDD 查看详情

Web 开发人员的最佳做法

重点:永远不要假设视频会播放,并且在视频未实际播放时也不要显示暂停按钮。

您应该始终查看 play 函数返回的 Promise,看它是否被拒绝:

var promise = document.querySelector('video').play()
if (promise !== undefined) {
promise
.then((_) => {
// Autoplay started!
})
.catch((error) => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
})
}

使用静音的自动播放功能,并让他们选择取消静音

<video id="video" muted autoplay></video>

HWIDGEN

是一款由国外 Nsane 论坛会员 s1ave77 制作的 Windows 10 数字权利激活工具,可以自动获取 Windows 10 数字许可证

数字许可证(在 Windows 10 版本 1511 中称为数字授权)是 Windows 10 的一种激活方法,该方法不需要输入产品密钥。在同一台电脑上主要硬件(应该是 CPU 和主板)不变化的情况下,重新安装系统时无需再次输入密钥,系统会在自动连接到微软服务器进行激活。

下载地址

https://www.aiowares.com/showthread.php?tid=246
百度网盘:https://pan.baidu.com/s/111rJZHaOFJrpOdOKXW5Vcw 提取码:3o1c
阿里云盘:https://www.aliyundrive.com/s/rDRjZipezKs 提取码:f99y

离线 KMS 激活工具 HEU KMS Activator v19.6.2 正式版

支持 Office2010/2013/2016/2019 、Windows10/8.1/8 等版本 KMS 激活
支持 Win10 数字许可证激活

下载地址

百度网盘:https://pan.baidu.com/s/1gAGqEHEMjUa4IDx4tYNXag 提取码:vrfc
阿里云盘:https://www.aliyundrive.com/s/QUzToEPidB7 提取码: f99y

Microsoft 激活脚本(MAS):

一组脚本,用于使用 HWID / KMS38 / 在线 KMS 激活方法激活 Microsoft 产品,重点是开放源代码,较少的防病毒检测和用户友好性。
原贴地址(需要登录):https://www.nsaneforums.com/topic/316668-microsoft-activation-scripts/

下载地址

github:https://github.com/massgravel/Microsoft-Activation-Scripts
gitlab:https://gitlab.com/massgrave/microsoft-activation-scripts
百度网盘:https://pan.baidu.com/s/1JKEYAfgJj9msfW81bhbKjw 提取码:21di
阿里云盘:https://www.aliyundrive.com/s/ZU7am7SwVx8 提取码:f99y

Google Drive 团队盘,不是增加你本身空间,是增加一个团队盘在你名下,你账号是 15G 依然是 15G,但是存在团队盘里的不算你的占用。

申请地址:
http://leon.educationhost.cloud/
https://td.fastio.me/
https://gd.zxd.workers.dev/ All Saints CofE Junior School
https://teamdrive.xcpx.workers.dev/ swccd.edu
https://gd.404edu.workers.dev/ 台灣教育部

输入团队盘名称,随便你自己取,建议英文格式。Gmail 邮箱地址建议用自己的小号。弄好这两样后点击提交即可,等提示创建成功就 OK 了。

登陆 Google Drive 后你会发现在 My Drive (我的云端硬盘) 下面多出了一个 Shared drives (共享云端硬盘) 的菜单按钮

无限空间方式:

  • 教育版无限空间
  1. 卖给你支持 GApps 的学校的邮箱账号密码,简单直接,没啥好说的,登上去就有了
  2. 不给你邮箱,让你提供自己的 Gmail 账号,然后他给你拉进去。详细讲就是他新开一个 “share drive” 然后把你拉进去,你们俩就共享这个 “share drive” 的无限空间了。(记得将自己设置成管理员,并把拉你的人从 share drive 中删除)

如果买了邮箱也建议自己按照上面方式 2 那样给自己的 Gmail 分配无限空间,因为买的教育邮箱可能来路不正,可能被封,而分配出去的 share drive 是不受影响的。

  • 从 G Suit 获取的无限空间
    跟上面的教育网那个类似的,只是是商业的用途,按月交钱,不同档次支持的用户数不同。同样是把你拉进去就可以用无限空间了。这玩意儿人家只要不续费了你就完犊子了。管理员是可以随意查看账号中的内容

04/27 更新 解决 workers 无法正常访问

作者删除了 github 仓库, GoIndex 依赖的 js 资源加载失败,导致网页打开是一片空白

解决方法;

首先到 GitHub Fork 一份 goindex,可以直接 fork 我的

登录 CF,打开 workers,选中项目,找到以下代码,我的是在 21 行,替换成有效的即可(可以是你 fork 的,也可以直接使用我的)

<script src="//cdn.jsdelivr.net/combine/gh/jquery/jquery@3.2/dist/jquery.min.js,gh/donwa/goindex@${authConfig.version}/themes/${authConfig.theme}/app.js"></script>

替换成

<script src="//cdn.jsdelivr.net/combine/gh/jquery/jquery@3.2/dist/jquery.min.js,gh/cuilongjin/goindex/themes/${authConfig.theme}/app.js"></script>

原文

利用 GoIndex 程序,以及 CloudFlare,可以将 Google Drive 文件以目录形式(类似 OneIndex 部署 OneDrive 网盘)列出,可直链调用网盘图片、音频、视频文件等,也可以下载,流量走 CloudFlare ,网速由 CloudFlare 决定

项目地址: https://github.com/donwa/goindex

demo: https://index.gd.workers.dev/

安装部署方案 1

1、在本地安装 rclone
2、按照 https://rclone.org/drive/ 流程进行授权
3、执行 rclone config file 查看 rclone.conf 路径。找到 root_folder_id 和 refresh_token 记录下来
4、下载 https://github.com/donwa/goindex 中的 index.js 并填入 root 和 refresh_token
5、复制代码 到 CloudFlare 部署

安装部署方案 2

作者不会记录 refresh_token,但为避免纠纷,建议有条件的同学使用方案 1 进行部署
1、访问 https://install.gd.workers.dev/
2、授权认证后,生成部署代码
3、复制代码 到 CloudFlare 部署

目录 id:例如 google 网盘链接为 https://drive.google.com/drive/folders/1rrDnupW_1qxRnQf-jy_0PN_GqNK8SEk2,则目录 id 为 1rrDnupW_1qxRnQf-jy_0PN_GqNK8SEk2

部署 CloudFlare

绑定自定义域名

https://github.com/donwa/goindex/issues/4

todo:
https://www.cnblogs.com/mysummerday/p/12661263.html#_caption_1

./rclone.exe mount secret:/ Q: --cache-dir G:\OneDrive --vfs-cache-mode writes &

Fatal error: failed to mount FUSE fs: mount stopped before calling Init: mount failed: cgofuse: cannot find winfsp

安装 rclone 并挂载 Googledrive

安装 rclone

Linux 环境

curl https://rclone.org/install.sh | sudo bash

Windows 环境

直接去 rclone 官网下载 rclone,最好将 rclone.exe 所在目录加入系统环境变量

配置 rclone

详细配置参考 https://rclone.org/drive/

rclone config
No remotes found - make a new one
n) New remote
s) Set configuration password
q) Quit config
n/s/q> n # 新建
name> gdrive # 名称,后面要用到
Type of storage to configure.
Enter a string value. Press Enter for the default ("").
Choose a number from below, or type in your own value
1 / 1Fichier
\ "fichier"
2 / Alias for an existing remote
\ "alias"
3 / Amazon Drive
\ "amazon cloud drive"
4 / Amazon S3 Compliant Storage Provider (AWS, Alibaba, Ceph, Digital Ocean, Dreamhost, IBM COS, Minio, etc)
\ "s3"
5 / Backblaze B2
\ "b2"
6 / Box
\ "box"
7 / Cache a remote
\ "cache"
8 / Citrix Sharefile
\ "sharefile"
9 / Dropbox
\ "dropbox"
10 / Encrypt/Decrypt a remote
\ "crypt"
11 / FTP Connection
\ "ftp"
12 / Google Cloud Storage (this is not Google Drive)
\ "google cloud storage"
13 / Google Drive
\ "drive"
14 / Google Photos
\ "google photos"
15 / Hubic
\ "hubic"
16 / In memory object storage system.
\ "memory"
17 / JottaCloud
\ "jottacloud"
18 / Koofr
\ "koofr"
19 / Local Disk
\ "local"
20 / Mail.ru Cloud
\ "mailru"
21 / Mega
\ "mega"
22 / Microsoft Azure Blob Storage
\ "azureblob"
23 / Microsoft OneDrive
\ "onedrive"
24 / OpenDrive
\ "opendrive"
25 / Openstack Swift (Rackspace Cloud Files, Memset Memstore, OVH)
\ "swift"
26 / Pcloud
\ "pcloud"
27 / Put.io
\ "putio"
28 / QingCloud Object Storage
\ "qingstor"
29 / SSH/SFTP Connection
\ "sftp"
30 / Sugarsync
\ "sugarsync"
31 / Transparently chunk/split large files
\ "chunker"
32 / Union merges the contents of several remotes
\ "union"
33 / Webdav
\ "webdav"
34 / Yandex Disk
\ "yandex"
35 / http Connection
\ "http"
36 / premiumize.me
\ "premiumizeme"
Storage> 13 # 选择 13 google drive
** See help for drive backend at: https://rclone.org/drive/ **

Google Application Client Id
Setting your own is recommended.
See https://rclone.org/drive/#making-your-own-client-id for how to create your own.
If you leave this blank, it will use an internal key which is low performance.
Enter a string value. Press Enter for the default ("").
client_id> # 默认
Google Application Client Secret
Setting your own is recommended.
Enter a string value. Press Enter for the default ("").
client_secret> # 默认
Scope that rclone should use when requesting access from drive.
Enter a string value. Press Enter for the default ("").
Choose a number from below, or type in your own value
1 / Full access all files, excluding Application Data Folder.
\ "drive"
2 / Read-only access to file metadata and file contents.
\ "drive.readonly"
/ Access to files created by rclone only.
3 | These are visible in the drive website.
| File authorization is revoked when the user deauthorizes the app.
\ "drive.file"
/ Allows read and write access to the Application Data folder.
4 | This is not visible in the drive website.
\ "drive.appfolder"
/ Allows read-only access to file metadata but
5 | does not allow any access to read or download file content.
\ "drive.metadata.readonly"
scope> 1 # 选1,所有权限
ID of the root folder
Leave blank normally.

Fill in to access "Computers" folders (see docs), or for rclone to use
a non root folder as its starting point.

Note that if this is blank, the first time rclone runs it will fill it
in with the ID of the root folder.

Enter a string value. Press Enter for the default ("").
root_folder_id> # 默认
Service Account Credentials JSON file path
Leave blank normally.
Needed only if you want use SA instead of interactive login.
Enter a string value. Press Enter for the default ("").
service_account_file> # 默认
Edit advanced config? (y/n)
y) Yes
n) No (default)
y/n> # 默认
Remote config
Use auto config?
* Say Y if not sure
* Say N if you are working on a remote or headless machine
y) Yes (default)
n) No
y/n> n # 如果在远程服务器上配置,记得选 n,否则可能无法正常授权
If your browser doesn't open automatically go to the following link: http://127.0.0.1:53682/auth
Log in and authorize rclone for access
Waiting for code...
Got code
Configure this as a team drive?
y) Yes
n) No
y/n> n
--------------------
[remote]
client_id =
client_secret =
scope = drive
root_folder_id =
service_account_file =
token = {"access_token":"XXX","token_type":"Bearer","refresh_token":"XXX","expiry":"2014-03-16T13:57:58.955387075Z"}
--------------------
y) Yes this is OK
e) Edit this remote
d) Delete this remote
y/e/d> y
Current remotes:
Name Type
==== ====
gdrive drive

e) Edit existing remote
n) New remote
d) Delete remote
r) Rename remote
c) Copy remote
s) Set configuration password
q) Quit config
e/n/d/r/c/s/q> q

注意:如果在远程 linux 安装,有些配置 (涉及 oauth2 的配置) 需要使用浏览器授权,可以使用一下方法配置

参考:https://rclone.org/remote_setup/

Remote config
Use auto config?
* Say Y if not sure
* Say N if you are working on a remote or headless machine
y) Yes
n) No
y/n> n # 这里选择 n,授权链接会变成如下样式,而不再是 http://127.0.0.1
Please go to the following link: https://accounts.google.com/o/oauth2/auth?access_type=offline&client_id=202264815644.apps.googleusercontent.com&redirect_uri=urn%3Aietf%3Awg%3Aoauth%3A2.0%3Aoob&response_type=code&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive&state=J17j_xVz3tAQmV3sMO0xxw
Log in and authorize rclone for access
Enter verification code> # 打开链接登陆授权,将code粘贴到这里

挂载

mkdir -p /home/gdrive
#gdrive 为上面配置的 name
#/home/gdrive 为挂载到本地的目录
/usr/bin/rclone mount gdrive: /home/gdrive \
--umask 0000 \
--default-permissions \
--allow-non-empty \
--allow-other \
--buffer-size 32M \
--dir-cache-time 12h \
--vfs-cache-mode \
writes &

报错
Fatal error: failed to mount FUSE fs: fusermount: exec: “fusermount”: executable file not found in $PATH
解决:安装 fuse
apt-get install fuse -y

# 卸载磁盘
fusermount -qzu LocalFolder # LocalFolder 为本地挂载目录

查看挂载

df -h
Filesystem Size Used Avail Use% Mounted on
gdrive: 1.0P 0 1.0P 0% /home/gdrive

自动挂载

cat > /etc/systemd/system/rclone.service <<EOF
[Unit]
Description=Rclone
AssertPathIsDirectory=LocalFolder
After=network-online.target

[Service]
Type=simple
ExecStart=/usr/bin/rclone mount emby: /home/gdrive \
--umask 0000 \
--default-permissions \
--allow-non-empty \
--allow-other \
--buffer-size 32M \
--dir-cache-time 12h \
--vfs-read-chunk-size 64M \
--vfs-read-chunk-size-limit 1G
ExecStop=/bin/fusermount -u LocalFolder
Restart=on-abort
User=root

[Install]
WantedBy=default.target
EOF

启动

systemctl start rclone

开启启动

systemctl enable rclone

安装 docker 插件 + v2ray 映像

注意:X86 架构的 CPU 支持 docker,ARM 架构的 CPU 不支持 docker

在群辉套件中心搜索 docker 并安装

打开 docker,搜索 v2ray,双击下载 v2ray/official 即可

选择刚刚下载的映像,点击启动

输入容器名称,点击高级设置

在高级设置中勾选启用自动重新启动和创建桌面快捷方式

在卷中添加文件夹,装载路径为 /etc。需要提前在 file station 中创建好 docker/v2ray 文件夹

在网络中勾选 使用与 Docker Host 相同的网络

其他默认,点击应用

点击下一步

向导完成后运行此容器 取消选中(因为还没有配置文件)。点击应用

v2ray 客户端配置文件

可以用 gui 客户端中配置好服务器,直接导出客户端配置文件为 config.json,我使用的是 v2rayN

编辑 config.json, 修改 listen 为 0.0.0.0, protocol 为 http,port 随意,也可以不改

在 v2rayN 程序文件夹中 找到 geoip.dat geosite.dat 文件

在刚刚创建的 docker/v2ray 文件夹中在创建一个 v2ray 文件夹,将 config.json geoip.dat geosite.dat 三个文件放进去

我的部分 config.json 配置

{
"inbounds": [
{
"tag": "proxy",
"port": 10808,
"listen": "0.0.0.0",
"protocol": "http",
"sniffing": {
"enabled": true,
"destOverride": [
"http",
"tls"
]
},
"settings": {
"auth": "noauth",
"udp": true,
"ip": null,
"address": null,
"clients": null
},
"streamSettings": null
}
]
}

最后启动刚刚创建好的 docker 即可

连接

到这了只是在群辉中安装了 v2ray 客户端,并配置了服务器,还需要手动连接代理,在群辉中,你需要在 控制面板 - 网络 - 常规 - 代理服务器 中添加代理

如果你的其他设备想要连接也需要相同的方式手动配置代理

在 win10 设置中,如下图所示位置,代理方式只支持 http 代理(这就是为什么上步中要把 protocol 改为 http)地址为你群规的 ip,端口就是上步中设置的端口,配置完之后保存即可

手机中同理,在无线中配置代理

如果你想实现只需连接家里无线就可以直接实现科学上网,你需要在路由器中做一些配置,可以参考下文【待整理】

css

文字溢出省略号显示

/* 强制一行内显示文本 */
.single-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* 强制最多三行显示文本 */
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 强制三行显示 */
overflow: hidden;
text-overflow: ellipsis; /* 不是必须 */
}

让 div 宽度自适应文字内容

.fit-width {
width: fit-content;
}

opacity:0、display:none、visibility:hidden

opacity:0display:none,若父节点元素应用了 opacity:0display:none,无论其子孙元素如何挣扎都不会再出现在大众视野
而若父节点元素应用 visibility:hidden,子孙元素应用 visibility:visible,那么其就会毫无意外的显现出来

max-width 优先级高于行内样式加!important

<style>
div {
max-width: 50px;
}
</style>
<div style="width: 100px !important;"></div>

div 的宽度为 50px

使用 CSS 网格定义 main 和 aside 元素

CSS 网格可用于定义布局中的 main 部分和 aside 部分,这是 CSS 网格的绝佳用途。问题是,即使 aside 是空的,它的高度也会和 main 的高度相等。

要修复这个问题,可以让 aside 元素与其父元素的起点对齐,这样它的高度就不会扩展了。

.wrapper {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-gap: 20px;
}

/* align-self 将会让 aside 元素与其父元素的起点对齐。 */
aside {
grid-column: 1 / 4;
grid-row: 1;
align-self: start;
}

main {
grid-column: 4 / 13;
}

使用 display: inline-block 时奇怪的空隙

给两个或两个以上的元素设置 display: inline-block 或者 display: inline ,将会导致它们之间产生一个微小的空隙。代码中的换行和缩进(连续空格)被渲染成了一个空格造成的

通过给父元素设置 font-size: 0 可以简单地解决这个问题。

交互式 HTML 元素的字体不生效

给整个文档设置字体的时候,字体并不会应用于诸如 input, button select 和 textarea 这些元素上。默认情况下,它们并不会继承文档字体,因为浏览器给它们应用了系统字体。

要修复这个问题,直接给他们设置字体属性:

input,
button,
select,
textarea {
font-family: your-font-name;
}

css 调试

将代码添加到浏览器的控制台运行,页面上所有元素的轮廓都会显示出来。

https://gist.github.com/addyosmani/fd3999ea7fce242756b1

;[].forEach.call($$('*'), function (a) {
a.style.outline = '1px solid #' + (~~(Math.random() * (1 << 24))).toString(16)
})

压缩或拉伸图片

用 CSS 调整一张图片的大小时,如果纵横比与图片的宽高不一致,则图片会被压缩或拉伸。

解决方法很简单:使用 CSS 的 object-fit。它的功能和给背景图片设置 background-size: cover 类似。

img {
width: 100%;
height: 100%;
object-fit: contain;
/* object-fit: cover; */
}

object-fit 语法参考
https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

object-fit 属性由下列的值中的单独一个关键字来指定。

取值
contain 保持长宽比,以长边填充
cover 保持长宽比,以短边填充,多余的会被裁减掉
fill 完全填充,会拉伸
none 保持其原有的尺寸
scale-down 内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。

滚动条样式

::-webkit-scrollbar {
width: 8px;
height: 8px;
}

/* -webkit-scrollbar-thumb 滚动条手柄 */
::-webkit-scrollbar-thumb {
}
::-webkit-scrollbar-thumb:hover {
}

/* -webkit-scrollbar-track 滚动条轨道 */
::-webkit-scrollbar-track {
}
/*滚动条上半边或左半边*/
::-webkit-scrollbar-track-piece:start {
}

/* -webkit-scrollbar-button 滚动条的轨道的两端按钮 */
/*滚动条上边或左边按钮*/
::-webkit-scrollbar-button:start {
}

/* -webkit-scrollbar-corne 垂直滚动条和水平滚动条相交的地方 */
::-webkit-scrollbar-corner {
}

卡券样式

.coupon {
width: 300px;
height: 100px;
position: relative;
background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right / 50% 50% no-repeat, radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 50% no-repeat, radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 50% no-repeat, radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 50% no-repeat;
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}

阴影效果

气泡阴影

.tip {
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid rgb(245, 129, 127);
border-radius: 4px;
position: relative;
background-color: #fff;
filter: drop-shadow(0px 2px 4px rgba(245, 129, 127, 0.9));
}
.tip::before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #fff transparent;
position: absolute;
top: -10px;
left: 0;
right: 0;
margin: auto;
z-index: 2;
}

.tip::after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent rgb(245, 129, 127) transparent;
position: absolute;
top: -11px;
left: 0;
right: 0;
margin: auto;
z-index: 1;
}

三角形阴影

.shadow-triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px 50px;
border-color: transparent transparent rgb(245, 129, 127) transparent;
filter: drop-shadow(10px 0px 10px rgba(238, 125, 55, 0.5));
}

缺圆投影

.circle-square {
width: 100px;
height: 50px;
line-height: 50px;
background: radial-gradient(circle at bottom right, transparent 20px, rgb(245, 129, 127) 15px);
filter: drop-shadow(2px 2px 2px rgba(238, 132, 66, 0.9));
}

1px 边框

/* 方式1 */
.border:before {
content: ' ';
box-sizing: border-box;
position: absolute;
pointer-events: none;
width: 200%;
height: 200%;
left: 0;
top: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
transform-origin: 0 0;
border: 1px solid #ccc;
}

/* 方式2 */
.border:before {
content: ' ';
box-sizing: border-box;
position: absolute;
pointer-events: none;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
border: 1px solid #ccc;
}

记住密码之后,输入框变色问题

谷歌浏览器使用如下方式解决

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: #ededed !important; // 自动填充文字颜色
-webkit-box-shadow: 0 0 0px 1000px white inset !important; // 使用内阴影覆盖,这个内阴影一定要大,要不然盖不住
}

火狐浏览器无效

自定义封装 vue 指令,实现 select 下拉框滚动加载

封装 v-loadmore 指令

Vue.directive('loadmore', {
bind(el, binding) {
// 获取 element-ui 定义好的 scroll 盒子
const target = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
target.addEventListener('scroll', function() {
// scrollHeight 获取元素内容高度(只读)
// scrollTop 获取或者设置元素的滚动高度
// clientHeight 读取元素的可见高度(只读)
const flag = this.scrollHeight - this.scrollTop <= this.clientHeight
if (flag) {
binding.value()
}
})
}
})

使用

<el-select
v-loadmore="loadMore">
<el-option></el-option>
</el-select>

<script>
export default {
methods: {
loadMore () {
if (this.loadingMore == false) {
this.loadingMore = true
return
}
if (this.currentPage > this.totlaPage) {
return
}
// 获取数据
this.getData()
}
}
}

使用 vue-infinite-scroll

github 地址:https://github.com/ElemeFE/vue-infinite-scroll

安装

npm i vue-infinite-scroll

使用

// # main.js
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<li v-for="(item, index) in moveRecord" :key="index"></li>
</ul>

<script>
export default {
methods: {
loadMore () {
this.busy = true;

setTimeout(() => {
for (var i = 0, j = 10; i < j; i++) {
this.data.push({ name: count++ });
}
this.busy = false;
}, 1000);
}
}
}

element-ui el-scrollbar 组件

https://github.com/ElemeFE/element/blob/dev/packages/scrollbar/src/main.js

<el-scrollbar style="height: 200px">
<ul>
<li>zs</li>
...
</ul>
</el-scrollbar>
.el-scrollbar__wrap {
overflow-x: hidden;
}

微信小程序的 API 都是回调函数,一不小心就是回调地狱。我们可以用 Promise 封装下

const Promisify = f => {
return (arg = {}) => {
return new Promise((resolve, reject) => {
arg.success = res => {
resolve(res)
}
arg.fail = res => {
reject(res)
}
f(arg)
})
}
}

// 使用
const Request = Promisify(wx.request)
const Login = Promisify(wx.login)
Login().then(res => {
if (res.code) {
Request({ url: 'text.php' }).then(res => {
console.log(res)
})
}
})

相关问题

wx.request 经 Promise 封装后,如何拿到 requestTask

iconfont 选择好需要使用的图标,将代码下载,解压后找到 iconfont.css 修改名称为 iocnfont.wxss 放到项目中即可

使用: Font class 方式

<icon class="iconfont icon-xxx"></icon>

将无效的字体引用删除,只保留 base64 引用

@font-face {
font-family: 'iconfont';
src: url('data:application/x-font-woff2;charset=utf-8;base64,...') format('woff2');
}

Font class 方式不支持使用彩色图标,且 symbol 方式也无法使用,因为 iconfont.js 中含有操作 dom 的代码,会报错 Cannot read property ‘getElementsByTagName’ of undefined

如果想引入彩色图标

https://github.com/iconfont-cli/mini-program-iconfont-cli