• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册
OStack程序员社区-中国程序员成长平台 › 门户 › 编程› Vant›Vant教程

Vant教程

RSS
  • Vant GoodsAction 商品导航
    Vant GoodsAction 商品导航
    引入import Vue from vue;import { GoodsAction, GoodsActionIcon, GoodsActionButton } from vant;Vue.use(GoodsAction);Vue.use(GoodsActionButton);Vu_来自Vant 中文教程……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:49 | 阅读：355 | 回复：0
  • Vant SubmitBar 提交订单栏
    Vant SubmitBar 提交订单栏
    引入import Vue from vue;import { SubmitBar } from vant;Vue.use(SubmitBar);代码演示基础用法van-submit-bar :price=3050 button-text=提交订单 @sub_来自Vant 中文教程……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:49 | 阅读：326 | 回复：0
  • Vant Sku 商品规格
    Vant Sku 商品规格
    引入import Vue from vue;import { Sku } from vant;Vue.use(Sku);代码演示基础用法van-sku v-model=show :sku=sku :goods=goods :goods-id=go_来自Vant 中文教程……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:49 | 阅读：333 | 回复：0
  • Vant SwitchCell 开关单元格
    Vant SwitchCell 开关单元格
    废弃提示SwitchCell 组件将在 3.0 版本中废弃，请直接使用 Cell 和 Switch 组件代替引入import Vue from vue;import { SwitchCell } from vant;Vue.use(SwitchCell);代码演示基础用法va_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:49 | 阅读：325 | 回复：0
  • Vant Pagination 分页
    Vant Pagination 分页
    引入import Vue from vue;import { Pagination } from vant;Vue.use(Pagination);代码演示基础用法van-pagination v-model=currentPage :total-items=_来自Vant 中文教程……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:48 | 阅读：329 | 回复：0
  • Vant Sidebar 侧边导航
    Vant Sidebar 侧边导航
    引入import Vue from vue;import { Sidebar, SidebarItem } from vant;Vue.use(Sidebar);Vue.use(SidebarItem);代码演示基础用法通过v-model绑定当前选中项的索引van-side_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:48 | 阅读：315 | 回复：0
  • Vant Tab 标签页
    Vant Tab 标签页
    引入import Vue from 'vue';import { Tab, Tabs } from 'vant';Vue.use(Tab);Vue.use(Tabs);代码演示基础用法通过v-model绑定当前激活标签对应的索引值，默认情况下_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:48 | 阅读：312 | 回复：0
  • Vant Tabbar 标签栏
    Vant Tabbar 标签栏
    引入import Vue from vue;import { Tabbar, TabbarItem } from vant;Vue.use(Tabbar);Vue.use(TabbarItem);代码演示基础用法v-model默认绑定选中标签的索引值，通过修改v-model即可切换_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:48 | 阅读：317 | 回复：0
  • Vant TreeSelect 分类选择
    Vant TreeSelect 分类选择
    引入import Vue from vue;import { TreeSelect } from vant;Vue.use(TreeSelect);代码演示单选模式item为分类显示所需的数据，数据格式见下方示例。main-active-index表示左侧高亮选项的索引，active_来自Vant 中文 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:48 | 阅读：333 | 回复：0
  • Vant AddressEdit 地址编辑
    Vant AddressEdit 地址编辑
    引入import Vue from vue;import { AddressEdit } from vant;Vue.use(AddressEdit);代码演示基础用法van-address-edit :area-list=areaList show-postal_来自Vant 中文教程……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:48 | 阅读：328 | 回复：0
  • Vant AddressList 地址列表
    Vant AddressList 地址列表
    引入import Vue from vue;import { AddressList } from vant;Vue.use(AddressList);代码演示基础用法van-address-list v-model=chosenAddressId :list=_来自Vant 中文教程……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:48 | 阅读：338 | 回复：0
  • Vant Area 省市区选择
    Vant Area 省市区选择
    介绍省市区三级联动选择，通常与弹出层组件配合使用引入import Vue from vue;import { Area } from vant;Vue.use(Area);代码演示基础用法要初始化一个Area组件，你需要传入一个area-list属性，数据格式_来自Vant 中 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:48 | 阅读：368 | 回复：0
  • Vant Card 卡片
    Vant Card 卡片
    引入import Vue from vue;import { Card } from vant;Vue.use(Card);代码演示基础用法van-card num=2 price=2.00 desc=描述信息 title=商品标题 thu_来自Vant 中文教程……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:48 | 阅读：326 | 回复：0
  • Vant Contact 联系人
    Vant Contact 联系人
    介绍通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。引入import Vue from vue;import { ContactCard, ContactList, ContactEdit } from vant;Vue.use(ContactCard);Vue.u_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:48 | 阅读：337 | 回复：0
  • Vant Coupon 优惠券选择器
    Vant Coupon 优惠券选择器
    引入import Vue from vue;import { CouponCell, CouponList } from vant;Vue.use(CouponCell);Vue.use(CouponList);代码演示基础用法!-- 优惠券单元格 --v_来自Vant 中文教程……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:48 | 阅读：305 | 回复：0
  • Vant NoticeBar 通知栏
    Vant NoticeBar 通知栏
    引入import Vue from vue;import { NoticeBar } from vant;Vue.use(NoticeBar);代码演示基础用法van-notice-bar text=通知内容 left-icon=volume-o /禁用滚动_来自Vant 中文教程……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:47 | 阅读：358 | 回复：0
  • Vant Panel 面板
    Vant Panel 面板
    引入import Vue from 'vue';import { Panel } from 'vant';Vue.use(Panel);代码演示基础用法面板只是一个容器，里面可以放入自定义的内容van-panel title=标题 desc=_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:47 | 阅读：330 | 回复：0
  • Vant Progress 进度条
    Vant Progress 进度条
    引入import Vue from vue;import { Progress } from vant;Vue.use(Progress);代码演示基础用法进度条默认为蓝色，使用percentage属性来设置当前进度van-progress :percentage=50_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:47 | 阅读：335 | 回复：0
  • Vant Skeleton 骨架屏
    Vant Skeleton 骨架屏
    引入import Vue from vue;import { Skeleton } from vant;Vue.use(Skeleton);代码演示基础用法通过title属性显示标题占位图，通过row属性配置占位段落行数van-skeleton title :row=3_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:47 | 阅读：318 | 回复：0
  • Vant Steps 步骤条
    Vant Steps 步骤条
    引入import Vue from vue;import { Step, Steps } from vant;Vue.use(Step);Vue.use(Steps);代码演示基础用法active属性表示当前步骤的索引，从 0 起计van-steps :active=ac_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:47 | 阅读：353 | 回复：0
  • Sticky 粘性布局
    Sticky 粘性布局
    介绍Sticky 组件与 CSS 中position: sticky属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。引入import Vue from vue;import { Sticky } from vant; ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:47 | 阅读：338 | 回复：0
  • Vant Swipe 轮播
    Vant Swipe 轮播
    引入import Vue from vue;import { Swipe, SwipeItem } from vant;Vue.use(Swipe);Vue.use(SwipeItem);代码演示基础用法每个 SwipeItem 代表一张轮播卡片，可以通过autoplay属性设置自_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:47 | 阅读：349 | 回复：0
  • Vant Tag 标记
    Vant Tag 标记
    引入import Vue from vue;import { Tag } from vant;Vue.use(Tag);代码演示基础用法通过type属性控制标签颜色，默认为灰色van-tag标签/van-tagvan-tag type=pr_来自Vant 中文教程……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:47 | 阅读：350 | 回复：0
  • Vant Grid 宫格
    Vant Grid 宫格
    介绍宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航引入import Vue from vue;import { Grid, GridItem } from vant;Vue.use(Grid);Vue.use(GridItem);代码演示基本用法通过ico_来自Vant ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:47 | 阅读：360 | 回复：0
  • Vant IndexBar 索引栏
    Vant IndexBar 索引栏
    引入import Vue from vue;import { IndexBar, IndexAnchor } from vant;Vue.use(IndexBar);Vue.use(IndexAnchor);代码演示基础用法点击索引栏时，会自动跳转到对应的IndexAnchor锚点_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:47 | 阅读：321 | 回复：0
  • Vant SwipeCell 滑动单元格
    Vant SwipeCell 滑动单元格
    引入import Vue from vue;import { SwipeCell } from vant;Vue.use(SwipeCell);代码演示基础用法SwipeCell组件提供了left和right两个插槽，用于定义两侧滑动区域的内容van-swipe-cell&g_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:46 | 阅读：304 | 回复：0
  • Vant Toast 轻提示
    Vant Toast 轻提示
    引入import Vue from vue;import { Toast } from vant;Vue.use(Toast);代码演示文字提示Toast(提示内容);加载提示使用Toast.loading方法展示加载提示，通过forbidClick属性可以禁用背景点击，通过l_来自Vant 中文教 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:46 | 阅读：328 | 回复：0
  • Vant Circle 环形进度条
    Vant Circle 环形进度条
    引入import Vue from vue;import { Circle } from vant;Vue.use(Circle);代码演示基础用法rate属性表示进度条的目标进度，v-model表示动画过程中的实时进度。当rate发生变化时，v-model会以speed的速度变化，_来自Va ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:46 | 阅读：334 | 回复：0
  • Vant Collapse 折叠面板
    Vant Collapse 折叠面板
    引入import Vue from vue;import { Collapse, CollapseItem } from vant;Vue.use(Collapse);Vue.use(CollapseItem);代码演示基础用法通过v-model控制展开的面板列表，activeNa_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:46 | 阅读：314 | 回复：0
  • Vant CountDown 倒计时
    Vant CountDown 倒计时
    引入import Vue from vue;import { CountDown } from vant;Vue.use(CountDown);代码演示基本用法time属性表示倒计时总时长，单位为毫秒van-count-down :time=time /expo_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:46 | 阅读：329 | 回复：0
  • Vant Divider 分割线
    Vant Divider 分割线
    引入import Vue from vue;import { Divider } from vant;Vue.use(Divider);代码演示基础用法默认渲染一条水平分割线van-divider /展示文字通过插槽在可以分割线中间插入内容van-divid_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:46 | 阅读：320 | 回复：0
  • Vant ImagePreview 图片预览
    Vant ImagePreview 图片预览
    引入ImagePreview和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。import Vue from vue;import { ImagePreview } from vant;Vue.use(ImagePreview);代码演示基_来自Van ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:46 | 阅读：311 | 回复：0
  • Vant Lazyload 图片懒加载
    Vant Lazyload 图片懒加载
    引入​Lazyload​是Vue指令，使用前需要对指令进行注册import Vue from 'vue';import { Lazyload } from 'vant';Vue.use(Lazyload);// 注册时可以_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:46 | 阅读：312 | 回复：0
  • Vant List 列表
    Vant List 列表
    介绍瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。引入import Vue from vue;import { List } from vant;Vue.use(List);代码演示基础用法List 组件通过loading和finished两 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:46 | 阅读：303 | 回复：0
  • Vant Switch 开关
    Vant Switch 开关
    引入import Vue from vue;import { Switch } from vant;Vue.use(Switch);代码演示基础用法通过v-model绑定开关的选中状态，true表示开，false表示关van-switch v-model=checked_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:45 | 阅读：189 | 回复：0
  • Uploader 文件上传
    Uploader 文件上传
    引入import Vue from vue;import { Uploader } from vant;Vue.use(Uploader);代码演示基础用法文件上传完毕后会触发after-read回调函数，获取到对应的file对象van-uploader :after-rea_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:45 | 阅读：185 | 回复：0
  • Vant ActionSheet 上拉菜单
    Vant ActionSheet 上拉菜单
    引入import Vue from vue;import { ActionSheet } from vant;Vue.use(ActionSheet);代码演示基础用法ActionSheet通过actions数组来定义展示的选项，数组的每一项是一个对象，对象属性见文档下方表格。&lt_来自Vant ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:45 | 阅读：222 | 回复：0
  • Vant Dialog 弹出框
    Vant Dialog 弹出框
    介绍弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作弹出框组件支持函数调用和组件调用两种方式函数调用Dialog 是一个函数而不是组件，因此可以直接调用，展示对应的提示弹窗import { Dialog ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:45 | 阅读：315 | 回复：0
  • Vant DropdownMenu 下拉菜单
    Vant DropdownMenu 下拉菜单
    引入在app.json或index.json中引入组件，默认为ES6版本， usingComponents: { van-dropdown-menu: @vant/weapp/dropdown-menu/index, van-dropdown-item: @va_来自Vant 中文教程……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:45 | 阅读：299 | 回复：0
  • Vant Loading 加载
    Vant Loading 加载
    引入import Vue from vue;import { Loading } from vant;Vue.use(Loading);代码演示加载类型通过type属性可以设置加载图标的类型，默认为circular，可选值为spinnervan-loading /&_来自Vant 中文教程 ...……
    作者：菜鸟教程小白 | 时间：2022-1-28 20:45 | 阅读：325 | 回复：0
12下一页
热门推荐
More+
专题导读
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap