vant2.0
文章平均质量分 71
vantUI2.0+vue2.0使用总结
sunly_
郑州前端程序员一枚
展开
-
van-sticky 吸顶
<div class="box">1</div><van-sticky :offset-top="navbarHeight"> <van-button type="primary">基础用法</van-button></van-sticky><div class="box">2</div>e...原创 2020-05-08 15:42:17 · 6413 阅读 · 4 评论 -
SwipeCell 滑动单元格实践
实现的功能1.左滑删除<van-swipe-cell :right-width="110"> <li slot="default"> <img src="@img/home/6.png" alt=""> <div class="text"> <h2 class="toe">蛋糕店策划</h2> <p...原创 2020-03-19 10:30:39 · 1672 阅读 · 4 评论 -
DropdownMenu 下拉菜单 实践
<van-dropdown-menu><van-dropdown-item v-model="value1" :options="option1" /><van-dropdown-item v-model="value2" :options="option2" /></van-dropdown-menu><script> exp...原创 2020-03-19 10:23:43 · 10430 阅读 · 9 评论 -
Tabbar 标签栏,实现APP底部导航栏
<template> <footer> <!-- v-model: 当前选中标签的名称或索引值 route: 是否开启路由模式 active-color:选中标签的颜色 to: 点击后跳转的目标路由对象,同 vue-router 的 to 属性 --> <van...原创 2020-03-11 09:39:22 · 622 阅读 · 0 评论 -
3、关于地区选择:Area 省市区选择
<template> <div> <nav-bar :if_left_arrow="true" title="省市区选择"></nav-bar> <div @click="city_show = true"> <label for="">地址选择&l...原创 2020-03-10 11:27:54 · 2442 阅读 · 0 评论 -
1、关于地区选择:AddressList 地址列表
<template> <div class="address"> <nav-bar :if_left_arrow="true" title="收货地址"></nav-bar> <van-address-list v-model="active_id" :...原创 2020-03-10 11:17:03 · 2348 阅读 · 5 评论 -
2、关于地区选择:AddressEdit 地址编辑修改
<template> <div class="add_address"> <nav-bar :if_left_arrow="true" title="添加收货地址"></nav-bar> <van-address-edit :area-list="areaList" ...原创 2020-03-10 11:10:06 · 3330 阅读 · 4 评论 -
List 列表配合PullRefresh 实现:下拉刷新,上拉加载更多
<van-list v-model="loading" :finished="finished" finished-text="-- 暂无更多数据 --" @load="onLoad" class="list"> <div> <ul> <li v-for="(item,index) in list" :key...原创 2020-03-10 10:38:18 · 932 阅读 · 0 评论