图片加载完成再显示图片

核心只需要三行代码。在图片加载的时候，可以渲染一个加载动画提高用户体验，在图片加载完成后关闭加载动画打开图片显示。增加这个功能并不会浪费多长时间，但能够很大的提升用户体验，让用户知晓这里有张图片正在加载。 var img = new Image(); // url为图片地址 img.src = url; img.onload = res => { // 加载完成，让图片显示 }image相关事件:onabort、onerror、onload

技能 · 2022-02-17 · 625 人浏览
图片加载完成再显示图片

VueJS前端多语言国际化

通常在开发大型项目或国际项目的时候，我们都需要增加国际化模块，使网站可以显示多语言。我的思路是，每个语言分不同的文件，检测用户语言环境或通过用户设置来判断调用哪个语言文件，而在开发中程序员又能清楚到底是什么意思。由于我们不需要兼容IE，所以只使用navigator.language来获取用户语言。第一步：我们需要有个入口文件新建一个languge.js文件，这个文件主要功能为：获取Cookie中是否存在lang值，如果不存在则检测用户语言环境，并获取语言编码储存到Cookie，之后再调用相应的语言文件输出。// 引入js-cookie import Cookies from 'js-cookie' // 获取cookie中lang值 var lang = Cookies.get('lang'); // 如果lang值不存在则设置lang值（第一次访问） if (!lang) { // 如果用户语言环境为zh-CN则设置lang值为zh，并储存到cookie中 if (navigator.language == 'zh-CN') { lang = 'zh'

技能 · 2022-01-08 · 1014 人浏览
VueJS前端多语言国际化

JS禁止手机端全局触摸并允许局部触摸

在开发移动网页端的时候，总会遇到手机浏览器适配混乱，滚动条屡禁不止，以下提出一种解决方案——通过禁用全局触摸并允许局部触摸达到禁止效果。第一步：如果使用Vue开发，可以在Public/index.html入口处添加该代码，如果未使用框架，可单独创建Config文件进行全局引入。document.body.addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false });第二步：允许局部块触摸（使用ID获取的节点是一维数组。使用ClassName获取的节点是二维数组）var div = document.getElementsByClassName("divclassname"); div = div[0]; div.ontouchmove = function (ev) { ev.stopPropagation(); };注：有个小Bug，在IOS系统下，触摸局部有几率会让地址栏收回导致布局出现变动，并导致全局滚动条出现，做好UI的适配可解决布局

技能 · 2021-06-20 · 1234 人浏览
JS禁止手机端全局触摸并允许局部触摸

js禁止wap页面缩放

一般我们都是使用html meta头来禁止网页进行缩放操作<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">但是在ios设备上面这条meta是完全不起作用的这个时候我们可以使用js来禁止缩放事件document.documentElement.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }, false); var lastTouchEnd = 0; document.documentElement.addEventListener('touchend', function (event) { var now = Date.now(

技能 · 2020-08-10 · 938 人浏览
js禁止wap页面缩放

微信小程序之如何连接蓝牙向蓝牙发送信息

1、初始化蓝牙模块openBluetoothAdapter:function() { let that = this; wx.openBluetoothAdapter({ complete(res) { } }) },2、检查蓝牙适配器状态getBluetoothAdapterState: function () { let that = this; wx.getBluetoothAdapterState({ success(res) { } }) },3、搜索蓝牙外围设备getBluetoothAdapterState: function () { let that = this; wx.getBluetoothAdapterState({ success(res) { } }) },4、获取所有已经发现的蓝牙设备 getBluetoothDevices:funct

技能 · 2018-11-23 · 637 人浏览
微信小程序之如何连接蓝牙向蓝牙发送信息

微信小程序之如何优雅的使用AES加密

最近在搞一个扫码的小程序，需要跟硬件对接，其中有一项选用AES128/CFB128/NOPACK加密，找半天才发现原来小程序本身有插件这东西1、登录小程序后台进到最下面的设置里选择第三方服务，然后再点击下方的添加插件2、搜索到Crypot然后添加3、引入Crypot加密1、在app.json文件里加入下面代码"plugins": { "crypto": { "version": "0.0.003", "provider": "wxf25d506ff81e19fb" } }2、在要使用加密的文件里引入const crypto = requirePlugin("crypto");3、加密解密var mi = new crypto.AES().encrypt('010203040506', key, { iv: iv, mode: crypto.Mode.CFB, padding:

技能 · 2018-11-21 · 826 人浏览
微信小程序之如何优雅的使用AES加密
2013 - 2024 DIMM. All Rights Reserved.
Theme Jasmine by Kent Liao