vant weapp 下拉_Vant Weapp小程序蹲坑之使用submit-bar组件

本文介绍在Vant Weapp小程序开发中使用submit-bar组件时需要注意的部分问题。坑来坑去，先上示例代码吧，由简单到复杂顺序。

main.js代码

main.json代码

index.vue代码

:price="3050"

button-text="提交订单"

@submit="onClickButton"

custom-class="van-submit-bar"

safe-area-inset-bottom="false"

disabled

:price="3050"

button-text="提交订单"

tip="您的收货地址不支持同城送, 我们已为您推荐快递"

@submit="onClickButton"

custom-class="van-submit-bar"

safe-area-inset-bottom="false"

:price="3050"

button-text="提交订单"

@submit="onClickButton"

custom-class="van-submit-bar"

safe-area-inset-bottom="false"

:price="3050"

button-text="提交订单"

@submit="onClickButton"

custom-class="van-submit-bar"

tip="true"

safe-area-inset-bottom="false"

标签

您的收货地址不支持同城送

修改地址

import Toast from '../../../static/vant/toast/toast'

export default {

data() {

return {

}

methods: {

onClickButton() {

Toast('点击按钮');

onClickLink() {

Toast('修改地址');

}

.van-submit-bar {

position: relative !important;

}

.edit-address {

color: #1989fa;

}

.van-tag {

margin-left: 15px;

}

运行效果

未完，待稍后补充...

坑s

归纳起来，使用submit-bar组件至少有下面几个小坑值得注意：

(1)上面使用了“:price="3050"”，这里的羊角“:”不可省略。在一般的vant weapp组件属性表达时，只需要写成price="3050"就可以了。有兴趣的朋友可以结合小程序自定义组件原理、vant weapp组件源码及mpvue框架转换逻辑进行尝试跟踪分析。如果没有这个冒号，则价格数字及人民币符号不显示！

(2)注意下面一句：

修改地址

这里的是小程序原生组件。mpvue框架＋vant weweapp组件库组件中使用小程序原生组件基本上没有什么问题，但个别地方值得注意。例如这里，如果使用原生代码表达，应该是这样：

修改地址

其他的大概没有什么了吧。

标签：bar,vant,代码,submit,地址,组件,Vant,蹲坑

来源： http://blog.51cto.com/zhuxianzhong/2349757

vant weapp 下拉_Vant Weapp小程序蹲坑之使用submit-bar组件相关推荐

vant weapp 下拉_Vant Weapp 1.0 正式版发布
1.0 来了 2018 年 8 月 11 日,我们发布了 Vant Weapp 的首个版本.16 个月以来,我们收到了 27 位开发者贡献的 1000 多次提交,也处理了 1200 多个 issue, ...
php 类似微信下拉菜单,微信小程序实现下拉框（附代码）
微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果下面来看一下代码: 首先WXML {{selectData[index]}} {{item}} 然后WXSS(如 ...
php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件列表1data:{ open:false }, showitem:function() ...
hooks taro 下拉刷新_小程序自定义下拉刷新（Taro版）
在考虑实现自定义的下拉刷新组件的时候,首先要明确,这个算是一种hack方案.并不是说自定义的有多么好,反而自定义的下拉刷新在android下会有细微的卡顿(我这种实现方式).所以尽量还是用小程序自带的 ...
小程序中scroll-view的下拉刷新和小程序页面的下拉刷新开启方法
scroll-view的下拉刷新 video.wxml中 <scroll-view class="videoScroll" scroll-y="true" ...
iOS 仿微信首页下拉弹出小程序
下载demo链接地址:https://github.com/825197989/iOS-.git
dakai微信小程序 ios_iOS APP拉起微信小程序
背景:由于公司业务需求,我们公司自己开发了一个微信小程序,然后通过App拉起微信小程序进行交互,有一些功能也可以放在小程序中去实现! 准备:首先你在微信的开放平台创建应用,并通过审核,就是你的App具 ...
iOS开发 APP拉起微信小程序Universal Links配置
APP中有需要跳转微信小程序的需求,记录一下接入过程步骤一:配置Associated Domains 1.登录苹果开发者中心,找到对应的Identifier勾选 Associated Domains ...
怎么做百度360今日头条1688搜狗下拉词？宙斯下拉、54小超人下拉、超人2下拉
今天小编要给大家讲解什么的下拉词,下拉词是指用户在输入某个关键词而出现的联想词,也叫下拉词,下拉词的作用,每个引擎的下拉词位置绝无仅有的10个位置,所以当客户去搜索某个产品或服务时,一眼就会看到这些加 ...

vant weapp 下拉_Vant Weapp小程序蹲坑之使用submit-bar组件

vant weapp 下拉_Vant Weapp小程序蹲坑之使用submit-bar组件相关推荐

最新文章

热门文章