- 博客(33)
- 收藏
- 关注
原创 大屏适配:flexible.js的源码及配置
flexible.js进行屏幕适配,flexible.js把屏幕分成24等份(也可以自定义别的份数),1920/24=80,所以此时适配时1rem=80px。在VSCode中使用“cssrem”插件,自动转换。在设置中把转换单位换成80。使用时直接引入js文件即可。(function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio ||
2021-07-07 16:27:26
2359
1
原创 vue底部导航栏的封装使用
一、效果截图二、项目结构三、代码内容1. 准备图片在assets文件夹中存放所需要的icon图片,点击时和未点击时两类。2. 创建页面在views文件夹下创建所需要的页面,这里一共有三个。3. 配置路由在router文件夹下的index.js中配置路由。(部分需修改的代码如下)import Home from '../views/Home.vue'import Unique from '../views/Unique.vue'import Me from '../views/
2021-07-07 11:56:22
257
原创 vue移动端项目日历组件,月周切换,点击进入上/下一个月
项目场景:Vue移动端项目的日历组件,移动端如果没有别的特别要求,一般用vant中的日历组件就OK,这里用的另一个。组件是网上找的,原网址:vue-hash-calendar,需要的请自行去看。我用他的这个组件,实现的功能:点击进行月周切换,显示当前日期,左右滑动切换月/周,点击箭头切换月/周)。项目效果:解决方案:< template >中的代码。<div> <div>每日记录</div> <img class="iconL
2021-06-25 10:39:20
4381
原创 vue项目在浏览器缩小时,使页面居中,放大后有滚动条
项目场景:vue项目界面在浏览器缩小时,自动居中显示。解决方案:通常情况下,浏览器缩小界面会自动左上角居中,想让页面在中间显示。在vue项目中,需要用到watch一直监听屏幕的缩放比。代码如下:data() { return { // 缩放比 screenRatio: Math.round((window.outerWidth / window.innerWidth) * 100), }; }, watch: { screenRatio: {
2021-06-25 09:41:47
3743
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人