草庐IT

vant-sticky

全部标签

微信小程序集成vant

   微信小程序集成vant,大概的过程先通过npm安装vant包->微信小程序设置npm环境变量->将npm中的vant包导成miniprogram_npm   开发环境macOS,微信小程序模版【支持腾讯云】安装vant包cdminiprogram#通过npm安装npmi@vant/weapp-S--production配置微信小程序的样式,去除miniprogram/app.json中"style":"v2"配置项目config中的packageJsonPath和miniprogramNpmDistDirpackageJsonPath->npm的package.json文件的位置mini

vue3+vant+vue-router+axios+pinia+vite框架搭建

vue3的官网地址:https://cn.vuejs.org/;这里要说一下,vue3不支持IE11,如果要兼容IE11及其一下,不建议使用vue3。创建vue脚手架,如果你需要使用ts,则需要node版本>=16。本文按照大于16的node版本来搭建一个vue3的脚手架。第一步:>npminitvue@latest  如果想创建指定版本,则使用  npminitvue@指定版本;“>”不要带上;  运行之后,会让你填写项目名称和选择你需要的插件,如下图     用空格键切换No/Yes;  Projiectname:项目名称;  Packagename:package.json里面name属

vue3+vant+vue-router+axios+pinia+vite框架搭建

vue3的官网地址:https://cn.vuejs.org/;这里要说一下,vue3不支持IE11,如果要兼容IE11及其一下,不建议使用vue3。创建vue脚手架,如果你需要使用ts,则需要node版本>=16。本文按照大于16的node版本来搭建一个vue3的脚手架。第一步:>npminitvue@latest  如果想创建指定版本,则使用  npminitvue@指定版本;“>”不要带上;  运行之后,会让你填写项目名称和选择你需要的插件,如下图     用空格键切换No/Yes;  Projiectname:项目名称;  Packagename:package.json里面name属

css定位 position:sticky

今天在做css定位的时候遇到一个问题,我想用fixed定位下来,但是发现这个时候定义的百分百宽度不随着父元素走了而是整个屏幕的百分百,这个就很尴尬了,也不能固定宽度吧,毕竟还要宽度自适应。这个时候发现了一个position的属性-----sticky它是relative和fixed的结合体可以理解为,当我们屏幕还没有滚动出原有的范围的时候就跟relative一样,正常排列在那里,当我们屏幕滚动出去了这个时候就fixed,常用语头部或者底部一个吸顶的行为,最最关键的是,他不会像fixed一样把他的父级变成浏览器可视区域,还是你的父级

css定位 position:sticky

今天在做css定位的时候遇到一个问题,我想用fixed定位下来,但是发现这个时候定义的百分百宽度不随着父元素走了而是整个屏幕的百分百,这个就很尴尬了,也不能固定宽度吧,毕竟还要宽度自适应。这个时候发现了一个position的属性-----sticky它是relative和fixed的结合体可以理解为,当我们屏幕还没有滚动出原有的范围的时候就跟relative一样,正常排列在那里,当我们屏幕滚动出去了这个时候就fixed,常用语头部或者底部一个吸顶的行为,最最关键的是,他不会像fixed一样把他的父级变成浏览器可视区域,还是你的父级

vant 的表单校验

vant的表单校验个人理解:将rules当成一个对象去理解,传参时可以是整个对象或者对象的某一属性常用两种校验方式1,正则表达式1.1自定义校验规则(校验规格也可传入多条):表单::rules="telRules"data:telRules:[{required:true,message:'手机号不能为空',trigger:blur,},{validator:value=>{return/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value)},message:'请输入正确的

vant 的表单校验

vant的表单校验个人理解:将rules当成一个对象去理解,传参时可以是整个对象或者对象的某一属性常用两种校验方式1,正则表达式1.1自定义校验规则(校验规格也可传入多条):表单::rules="telRules"data:telRules:[{required:true,message:'手机号不能为空',trigger:blur,},{validator:value=>{return/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value)},message:'请输入正确的

使用vscode + vite + vue3+ vant 搭建vue3脚手架

 技术栈开发工具:VSCode代码管理:Git前端框架:Vue3构建工具:Vite路由:vue-router4x状态管理:vuex4xAJAX:axiosUI库:vant数据模拟:mockjscss预处理:sass 构建vue3项目 1,安装 vite以管理员身份打开cmd命令窗口,切换到要安装项目的文件夹cd E:\code\web\myvue3安装 vitenpminitvite@latest 输入项目名称,输入包名称,选择Vue(如果上下键不能选择,就手动输入选项,再回车),选择JavaScript,创建完毕。  创建项目生成的文件:2,行vite+vue3项目打开vscode,输入两条

使用vscode + vite + vue3+ vant 搭建vue3脚手架

 技术栈开发工具:VSCode代码管理:Git前端框架:Vue3构建工具:Vite路由:vue-router4x状态管理:vuex4xAJAX:axiosUI库:vant数据模拟:mockjscss预处理:sass 构建vue3项目 1,安装 vite以管理员身份打开cmd命令窗口,切换到要安装项目的文件夹cd E:\code\web\myvue3安装 vitenpminitvite@latest 输入项目名称,输入包名称,选择Vue(如果上下键不能选择,就手动输入选项,再回车),选择JavaScript,创建完毕。  创建项目生成的文件:2,行vite+vue3项目打开vscode,输入两条

Vant使用及遇到的问题

1.rem适配安装postcss-plugin-px2rem(推荐),也可使用官网的postcss-pxtoremnpmipostcss-plugin-px2rem--savepostCss配置//vue.config.jsmodule.exports={css:{loaderOptions:{postcss:{plugins:[require('postcss-plugin-px2rem')({//换算基数,默认100,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。rootValue:75,unitPrecision:2,//允许