ICode9

精准搜索请尝试: 精确搜索
  • vant cascader组件数据回显问题2022-02-22 11:31:31

    1、vant数据回显需要用到下面的一个值 2、这个个值有好几种可能,我这里是四种,对应的的级联选择id 3、回显时不能频繁更改highCascaderValue的值,只要将其赋值为最后一个即可。上面就赋值"230881204" 4、然后往options中填入数据,就是children,一直到等级对应你的highCascaderV

  • 6.介绍vue 移动端的组件库2022-02-08 16:06:44

    6.介绍vue 移动端的组件库 mint-ui 被淘汰 vant Vant - Mobile UI Components built on Vue 6.1 安装vantui库 cnpm i vant -S   /   yarn add vant -S 6.2 配置UI库 自动按需引入组件 (推荐) babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动

  • 微信开发者工具笔记2022-01-29 17:29:59

    1。触摸事件:bindtap,touch,click(延迟300s) 2。长按时间:longtap,longpress 3。阻止冒泡捕获:catchtap 4。全局变量使用:在app.js里面globalData属性 App({ globalData: { userInfo: '123', } }) 在其他页面使用 //其他js文件 var app = getApp(); Page({ onLoad: f

  • vant上传组件通过【before-read】校验大小和格式2022-01-25 10:05:40

    <template #input> <van-uploader multiple v-model="item.desc" :before-read="(file)=>beforeRead(file,['jpg','jpeg','png'])" :after-read="(file)=>afterImgRead(fil

  • Vue/vant——未登陆时清空购物车以及拦截未登录的状态拒绝进入购物车页面2022-01-18 23:32:04

    cart.js // 清空购物车 clearCart(state){ state.list = [], state.selectAll = [] } axios.js "use strict"; import Vue from "vue"; import axios from "axios"; import store from "@/store"; impor

  • 【vant】van-steps自定义图标2022-01-18 12:34:11

    背景:要自定义步骤条的图片,但是官网上并没有找到相关示例,官网的自定义步骤条icon使用的是属性及vant的icons,我想要的是随便写什么,那就要用官网提供的slot 解决: 1、官网(vant官网)截图    2、实现:直接上代码,注意template的使用位置,内部使用div,用了背景图,so,完全定制。 <van-steps

  • VANT标签栏样式改变2022-01-18 12:00:08

    1 问题描述 在使用vant的Tab标签制作导航栏时,Tab样式书写方式同css有些许不同,并且一些样式变量是已经自定义的。那么如何改变样式呢?为此总结了一部分较为常用的样式的代码。 2 算法描述    在对Tab标签的样式进行改变时,不仅要写类标签名(class),还要写上vant-tab的所需要部分的名

  • vant下拉加载更多,上拉刷新2022-01-18 09:32:02

    https://www.bilibili.com/video/BV1zq4y1p7ga?p=218 List 组件通过 loading 和 finished 两个变量控制加载状态,当组件滚动到底部时,会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据,数据更新完毕后,将 loading 设置成 false 即可。若数据已

  • .postcssrc.js文件中常用配置2022-01-17 20:59:41

    module.exports = { plugins: { // 'autoprefixer': { // browsers: ['Android >= 4.0', 'iOS >= 8'] // }, 'postcss-pxtorem': { // rootValue: 37.5, rootValue({file}){

  • 微信小程序使用vant组件库2022-01-13 17:30:46

    1. 安装 首先去vant官网: https://youzan.github.io/vant-weapp/#/quickstart 找到安装命令: 通过 npm 安装 npm i @vant/weapp -S --production 通过 yarn 安装 yarn add @vant/weapp --production 2. 修改app.json 将 app.json 中的 “style”: “v2” 去除,小程序的新版基

  • vue-移动端适配-postcss-pxtorem2022-01-13 12:35:05

    1.安装lib-flexible npm i lib-flexible --save 2.在main.js引入lib-flexible import 'lib-flexible/flexible' 3.安装postcss-pxtorem   npm install postcss-pxtorem -D 4.配置postcss-pxtorem在根目录的.postcssrc.js文件中修改此文件自动生成,若没有,手动添加  mod

  • vue3+vant h5: Rem 移动端布局适配之postcss-pxtorem和lib-flexible2022-01-12 14:34:05

    如果不引入插件的话:ui稿的px转化成rem需自己计算 根据设计稿我们需要自己计算元素的rem(假如我们将html根元素font-size设置为41.4px); 那么1rem=41.4px; ui稿上的375px = 375/41.4rem=9rem; 这样每个元素进行计算是不是得疯,vant组件中推荐的适配方法: postcss-pxtorem 安装yarn add

  • Vant postcss-pxtorem配置2022-01-11 19:01:52

    1.npm i -S amfe-flexible     import 'amfe-flexible' 2. npm i postcss-pxtorem@5.1.1 --save-dev   在根目录下创建 .postcssrc.js module.exports = { plugins: { 'postcss-pxtorem': { rootValue({ file }) { ret

  • H5+Vant 上传文件2022-01-11 14:00:15

    uploaderImage.js function upLoaderImg(file, url) { //file为 你读取成功的回调文件信息 //new 一个FormData格式的参数 let params = new FormData() params.append('file', file) let config = { headers: { //添加请求头 'Content-Typ

  • Vant 输入框添加校验规则2022-01-06 02:02:07

     如果校验不通过 不会触发登录函数    详情见官方文档

  • Vant 登录发起axios等待动画结束2022-01-06 02:00:10

       settimeout 模拟AXIOS发起等待两秒,VANT新的toast会抹除之前的toast动画框,全局挂载VANT应该使用this.$toast ,settimeout是异步函数,THIS指向windows,所以使用ES6箭头函数 根据上下文作用域指向Vue

  • vue - 搭建 webapp 自适应项目-使用 vant 组件库 并 可自动调节大小2022-01-05 05:32:00

    1.创建个vue 项目,这里不详细写怎么创建,参考 vue - 指令创建 vue工程 - 岑惜 - 博客园 (cnblogs.com) https://www.cnblogs.com/c2g5201314/p/15660810.html 使用vue2.0     2.分别执行指令 安装 vant npm i vant -S 安装按需引入vant差插件 npm i babel-plugin-import -D

  • vant 选择时分秒2021-12-29 16:33:46

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>时分秒</title> <meta charset="UTF-8"> <meta name="apple-mobile-web-app-capable" conten

  • 处理vant list使用bug地点2021-12-23 15:33:42

    1.使用vant-list在滚动条触底的时候,没有触发onLoad事件 可能是因为在van-list父元素的地方设置了父元素高度为100%,这里不能这样设置, 还有就是可能对需要遍历的数据,在每一次触底时,都进行了初始化 2.有时候在tab标签切换后,滚动条不再触发onLoad事件 解决方法是,在切换标签函数后

  • 微信小程序用vant,dialog弹出框2021-12-22 18:02:16

    官网如下: https://youzan.github.io/vant-weapp/#/dialog 看效果 1、json中引入 "usingComponents": { "van-dialog": "/miniprogram_npm/@vant/weapp/dialog/index" } 2、js引入 import Dialog from '../../miniprogram_npm/@vant/weapp/dial

  • 手把手教你微信小程序如何设置密码输入框2021-12-20 16:03:55

    效果图 源代码 .josn 弹出框用了vant小程序的ui,需要下载。也可以不用,抽取关键代码即可。 vant-weapp:https://vant-contrib.gitee.io/vant-weapp/#/quickstart "usingComponents": { "van-popup": "@vant/weapp/popup/index" }, wxml <van-cell title="展示弹出

  • 在uniapp 中使用 vant weapp 12/18更新 亲测能用2021-12-18 10:30:22

    如何在uniapp 中使用 vant ui 现如今各大博客 一堆堆的水文 复制粘贴 翻来翻去 一点有用的都没有. 首先到 插件市场 直接导入这个案例 Vantui Weapp For Uni-app - DCloud 插件市场 这个vant 是被大佬们优化转化的,  uniapp 中可直接使用 直接把案例里的 wxcomponents 文件夹c

  • Vant 修改van-collapse-item右侧图标2021-12-15 09:59:34

    根据官方文档给出的示例,可以使用插槽来改变左侧图标样式 <van-collapse v-model="activeNames"> <van-collapse-item name="1"> <template #title> <div>标题1 <van-icon name="question-o" /></div> </template&g

  • vant中,van-dropdown-menu-item中open和close事件的顺序2021-12-12 13:02:55

    目前在做一个使用了vant组件库的项目,项目中有一块内容使用了DropDownMenu组件实现一个下拉菜单的效果,当菜单下拉的时候,菜单栏以及其上方搜索栏的背景颜色和字体颜色都会发生改变,关闭时会恢复原状。 这块我是使用了两个css样式用于区分菜单开始和菜单关闭的状态,并绑定到相对应dom的

  • Vant UI的index-bar( 索引栏 )组件中的anchor元素固定定位在Tab( 标签 )组件下失效的原因记录2021-12-09 16:02:43

    在用vant ui制作联系人列表的时候,在vant-tab组件下引用vant-index-bar组将, 发现index-anchor会跟随父元素一起滚动, 于是检查了anchor的样式 .van-index-bar__sidebar { position: fixed; top: 50%; right: 0; z-index: 2; display: flex; -webkit-bo

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有