uniapp小程序创建全局自定义组件并传递参数的方法
有一个联系信息模块，小程序的所有页面都要显示，如果每个页面都添加一次，不仅消耗时间，也不利于后期维护。如果使用自定义组件components就可以实现一个模块全站统一调用，既便于管理也利于维护。
创建全局自定义组件
1、在项目的根目录下的components目录下新建组件（如果没有components目录则手动新建）
在HBuilder编辑器，右键components目录...
uniapp用于获取小程序右上角胶囊按钮布局信息的 API uni.getMenuButtonBoundingClientRect()
胶囊按钮是小程序固定在屏幕右上角的菜单按钮，uni.getMenuButtonBoundingClientRect()方法是uniapp用于返回该胶囊菜单按钮的宽度、高度、上边界坐标、右边界坐标、下边界坐标和左边界坐标共六个布局信息。在开发小程序页面的自定义导航栏时，经常需要把自定义内容的高度和胶囊按钮的高度保持一致，便于和胶囊按钮垂直对齐，就需要通过该方法获取返回的布局信息来调整自定义导航的布局。使用示例：const rec...
CSS样式1px在Retina屏幕显示器上显示发虚的问题
Retina屏幕拥有比普通屏幕高得多的像素密度，比如一台13英寸的笔记本电脑可能拥有2560x1600的物理分辨率，但默认的系统设置会让它以一个类似1280x800的“逻辑分辨率”来工作，而在Retina屏幕上，1个逻辑像素实际上是由2x2=4个物理像素来共同显示的（DPR=2），这样做的目的是为了显示更细腻的文字和图像，因为一个逻辑点有更多物理像素来渲染，边缘会更平滑。所以在CSS中写border: 1px solid black;时...
Swiper.js使用creativeEffect创意切换实现3D圆弧轮播效果
Swiper.js默认插件提供了多种切换效果，其中creativeEffect创意切换效果参数多，可自定义性强，可以实现多种3D视觉的轮播切换，比如圆弧旋转木马轮播效果。HTML代码：<div class="arclist">
<div class="swiper">
...
Vue获取视频首帧作为视频封面图
Ajax返回的对象中使用Vue做的视频列表页面，把每个视频的首帧作为封面图片或者视频poster。HTML代码：<ul>
<li v-for="item,index in videoList">
<video&n...
HTML+SVG地图标注点动态线条扩散效果的笨方法
平面地图标注点线条连接效果。常用于公司的子公司或办事处在地图上标注点的效果，线条由总公司的标注点动态发散至各子公司或公事处，实现关联性的效果。HTML代码：<section id="global">
<div class="box" data-aos="fade-up">...
uniapp点击元素滚动到指定模块的实现代码
点击元素页面自动滚动到指定ID模块是一个网站常见的效果，在uniapp开发的时候需要实现这个效果，实现思路跟web网页实现代码是一致的：获取指定ID模块距离顶部的距离，再通过指定方法滚动到这个距离的像素（如uni.pageScrollTo）。PS：uni.pageScrollTo的核心作用是让页面滚动到指定的目标位置。view代码：<view class="custom-navbar">
&n...
Javascript滚动页面获取当前视窗模块的锚点的代码
常用的功能，当前页面模块锚点菜单固定跟随，当窗口滚动到某个模块时，当前锚点菜单高亮显示。思路是先获取每个模块距离顶部的大小，存到一个数组里，滚动的时候获取滚动的距离，再遍历数组对比当前滚动距离的值，如果大于滚动距离的值，就是当前锚点。或者每滚动一次，就遍历获取各锚点模块距离顶部的大小一次，再进行对比，但感觉这样性能会差很多，推荐前者。HTML代码：<div id="wrapper">
&nbs...
苹果手机浏览器不支持自动触发window.open()方法的解决方案
由于苹果手机浏览器为了防止恶意网站通过各种跳转方式打开其它网站的安全机制，会拦截一些代码自动触发而不是由用户直接交互触发的方法，比如window.open()、超链接a标签等，最常见的是在异步请求的回调函数中执行window.open()跳转会被苹果浏览器认为是非用户交互执行的操作被拦截，如果你在点击某个元素进行AJAX异步调用并成功返回结果后window.open()没有跳转，多半是被拦截了。一般的解决方法是使用location.hr...
Swiper.js轮播插件实现手机端横向滑动菜单效果
网页菜单左右横向滑动是手机端最常见的菜单布局效果，简单的左右滑动一般可以直接通过css样式overflow-x:scroll;（或auto自适应显示滚动）结合jQuery的scrollLeft()方法实现，但想要扩展性强一点，通过Swiper.js轮播插件实现会更好，而且个人感觉更丝滑。效果如下：效果基于Swiper 8.4.7版本，可自行前往官网下载：https://swiperjs.com/HTML代码：<link ...
GSAP ScrollSmoother插件内容区域不支持position:fixed样式属性的替代方案
GSAP的ScrollSmoother插件通过不断更新ScrollSmoother的Content元素translateY值来替换浏览器自身的页面滚动来实现平滑滚动，但这会导致内容区域里的元素使用position:fixed;样式失效。常规的解决方法是把使用了position:fixed;样式的元素放置在ScrollSmoother的wrapper元素外观，但如果有非要把position:fixed;样式元素放置在ScrollSmoot...
最常用的web html前端切换多语言网站的下拉菜单样式
有多个不同语言的网站，在右上角添加各语言网站的入口，最常用的前端样式就是下拉菜单。效果如下：HTML代码：<div id="language">
<span>中文</span>
<ul>
...
