![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vant
文章平均质量分 54
小曲曲
这个作者很懒,什么都没留下…
展开
-
vue2+vant2搭建H5框架
新建项目npm install --global @vue/clivue create vue-h5引入vant2.0bug :若莫名其妙报错是因为vant 版本太高,降低版本即可npm i vant -S按需引入组件npm i babel-plugin-import -Dbabel.config.js 中配置module.exports = { plugins: [ ['import', { libraryName: 'vant', li原创 2022-04-12 17:04:24 · 3700 阅读 · 3 评论 -
视频组件vue-video-player
video.js官网文档:https://docs.videojs.com/tutorial-options.html安装导入npm install vue-video-player -Snpm install 'video.js' -Simport Vue from 'vue'import VideoPlayer from 'vue-video-player'// require('video.js/dist/video-js.css') //按官网引会找不到然后报错,换成下面那个re.原创 2022-04-12 17:03:42 · 2858 阅读 · 3 评论 -
小程序架构搭建
1、新建小程序小程序管理工具——新建小程序2、装包vantcomputedstoreaxiosnpm i @vant/weapp -S --productionnpm install --save miniprogram-computednpm install --save mobx-miniprogram mobx-miniprogram-bindingsnpm install axios构建npm(设置使用npm模块)3、vant配置将 app.json 中的 “s原创 2021-06-16 16:28:48 · 1104 阅读 · 0 评论 -
原生js实现上拉加载
地址列表组件没有无法使用上拉加载,所以原生js实现给列表部分注册touchmove事件,监听用户滑动屏幕判断滚动条的位置距离底部高度为100时,page+1,并且拉去接口当接口调取过程中或者已经没有新的收据的时候,阻止page+和掉接口方案:loading和finished初始值为false,当开始掉接口时loading为true,接口成功为false;接口返回数据为空finish为true==》当loading或finish为true时,return网页正文全文高:document.b.原创 2020-07-24 16:09:52 · 1171 阅读 · 0 评论 -
小程序和公众号页面加载动画和无网络状态显示
小程序通过每个页面加组件的方式组件loading.vue<config> { "component":true, "usingComponents": { } }</config><template lang="wxml"> <view class="vh100"> <block wx:if="{{showLoad}}"> <view class="load flex fle.原创 2020-07-15 15:18:45 · 895 阅读 · 0 评论 -
小程序使用vant上拉加载和下拉刷新
<view class="list min100 bg"> <view class="item mg-16 bg-white" wx:for="{{list}}" data-id="{{index+3}}" bindtap="toIndex"> <image class="item-img w100" src="/images/new-bg.png" /> <view class="pro pd-24"> <原创 2020-06-04 10:24:48 · 3202 阅读 · 2 评论 -
tab切换子路由和子组件
方法一:子路由,适用于完全不同的情况//vant框架tab组件,结合to属性<template> <div class="audit_2"> <van-tabs v-model="active" sticky> <van-tab title="代理审核" to="/audit_2/audit" name="a"> <router-view key="a"></router-view>原创 2020-05-12 10:42:35 · 2449 阅读 · 0 评论 -
vantUI上传图片总结
form表单上传图片 <van-form @submit="onSubmit"> <van-field name="uploader" label="文件上传"> <template #input> //field插槽 <van-uploader v-model="uploade...原创 2020-03-17 15:25:39 · 1844 阅读 · 0 评论 -
vant坑总结
步进器1、列表,每一个都有一个步进器,同时获取数值和索引方法1: <van-stepper v-model="item.buy_num" :max="item.num" @change="changeNum($event,i)" /> // 改变数量 changeNum(e, i) { console.log(e); //数量 console...原创 2019-10-15 14:15:40 · 10514 阅读 · 4 评论 -
vue2.0项目的搭建
安装node.js从node官网下载并安装node,安装完成后,打开命令行工具输入命令node -v,出现对应版本号,即安装成功。npm包管理器,是集成在node中的,输入npm -v出现对应版本号,即安装成功。安装cnpm$ npm install -g cnpm --registry=https://registry.npm.taobao.org输入cnpm -v,可以查看当前cnp...原创 2020-03-13 09:10:05 · 265 阅读 · 0 评论 -
压缩图片上传 —— canvas和ajax
1、 图片加载完毕,把图片绘制到canvas上去2、转换为Bold对象或File对象3、ajax上传,一定要加name// ajax上传图片——文件流方式export function upload(base64, name) { return new Promise((resolve, reject) => { Toast.loading({ durat...原创 2019-11-16 12:00:19 · 170 阅读 · 0 评论 -
多商品订单填写防伪码
一个订单有多件商品,每件商品的购买数量有1箱5盒3个,那每件就需要9个码list:[ { code1: Array(0) code2: Array(0) code3: Array(0) code_one: Array(0) code_three: Array(0) code_two: Array(0) cover_Image: "http://lejiangkej...原创 2019-11-14 09:36:14 · 198 阅读 · 0 评论 -
首页装修element+vant+vue
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-cha...原创 2019-10-30 09:37:53 · 2936 阅读 · 2 评论 -
vant时间控件的使用
<template> <div class="shoukuan"> <!-- 头部公共搜索框 --> <tabbar title="添加团队活动"></tabbar> <div class="con"> <van-cell-group> <van-fi...原创 2019-10-23 11:06:45 · 15092 阅读 · 3 评论 -
vant图片预览
代码 <div class="image"> <p>支付凭证</p> <van-image width="2.7rem" height="2.7rem" fit="cover" :src="item" v-for="(i...原创 2019-10-19 10:13:55 · 3311 阅读 · 0 评论